JQUERY+CSS implement tab Bar switching

A few days ago interview met to write a tab bar switch function, thought basically understand, but haven't written for a long time, to realize the effect is really a bit difficult. Back, then the idea of a reason, write a, the basis is still very important.

The final effect to be achieved is as follows:

(1) Click the tab bar to display the corresponding content, and the tab bar style changes. Implementation: The General tab bar if you want to make a more good-looking style, will cut two pictures as a background, a check for the background, a piece for the unselected background. Here for simplicity, just use CSS to set the style. Then for each tab-bound Click event, when the Click event is triggered, the display of the corresponding content div is set to block, otherwise set to none.

(2) When the mouse hovers over the tab bar that is not selected, change the style and return the style when it is moved away. If the tab bar is selected, the mouse hover does not affect the style. Implementation: For the tab bar to add hover event, when the mouse entered, to determine whether the tab bar is selected (You can set a class for the selected tab bar, just to determine whether the class can be), in the case of the hover add the style.

Complete code as follows (code download address):

Html:

<!
  DOCTYPE html>  
Css:

. tab-contain{
    margin:50px Auto;
    width:1000px;
    padding:100px;
    Background: #7F7D7D;
}
#tabs {
    Overflow:hidden;
    width:100%;
    margin:0;
    padding:0;
    List-style:none;
}
#tabs li {
    float:left;
    margin:0;
}
Li a {
    position:relative;
    Background: #ddd;
    padding:10px 50px;
    Float:left;
    Text-decoration:none;
    Color: #444;
    text-shadow:0 1px 0 Rgba (255, 255, 255,. 8);
    border-radius:20px 20px 0 0;
    box-shadow:0 2px 2px rgba (0, 0, 0,. 4);

 Current a{
    outline:0;
    Background: #fff;
     Z-index:4
}
. Hoveritem a{
    background: #AAC8B9;
}
#content {
    background: #fff;
    padding:50px;
    height:220px;
    position:relative;
    border-radius:0 5px 5px 5px;
    box-shadow:0 -2px 3px-2px rgba (0, 0, 0,. 5);
item{
    display:none
}

. show{
    display:block;
}
 
Js:

 $ (function () {$ (' #tabs a '). Click (function (e) {e.preventdefault ();
          $ (' #tabs Li '). Removeclass ("current"). Removeclass ("Hoveritem");
          $ (this). Parent (). addclass ("current");
          $ ("#content div"). Removeclass ("show");
      $ (' # ' + $ (this). attr (' title ')] AddClass (' Show ');

     }); $ (' #tabs a '). Hover (function () {if (!$ (). Parent (). Hasclass ("current")) {$ (this). Parent (). addclass ("Hov
        Eritem ");
     }},function () {$ (this). Parent (). Removeclass ("Hoveritem");
  }); });