Simple implementation of the JQuery tab

  This article is mainly on the jquery tab simple implementation of the introduction, the need for friends can come to the reference, I hope to help you.

jquery implements the tab feature. First, the interface is built.   has navigation head tab_menu, and content Tab_box.   To achieve the effect is that, after the click, the corresponding content display, other content hidden away.   Add a background to the selected item to make the difference to show the selected state.   This time, I wrote the code, first look at the HTML section:     code as follows: <div class= "tab" >     <div class= "Tab_menu" >         <ul>             <li class= "selected" > Current affairs </li>             <li> sports </li>             <li> Entertainment &L t;/li>         </ul>     </div>     <div class= "Tab_box" >&nbs P          <div> Current affairs </div>          <div class= "Hide" > Sports </div>          <div class= "Hide" > Entertainment </div>     </div> </ div>   HTML, you need a large div with two Sub Div, one as the navigation head Tab_menu and one as the content body tab_box. The CSS code is responsible for layout HTML content.   CSS section:     code as follows: *{margin:0; padding:0;}. tab{    width:240px     margin:50px    /*border:1px solid;*/} tab_menu{  &nbs P Clear:both; }. Tab_menu li{    float:left;  //the navigation head left float     Text-align:center;  //to center text in     list -style:none;  //removal mark symbol     background: #F1F1F1; Set default background color     BORDER:1PX solid #898989; Set border color     margin-right:4px; The distance between each Li is 4px     cursor:pointer;  //Mouse floating on, there will be small hand signs appear     padding:1px 6px; Control Li's internal distance     border-bottom:none;   }. Tab_menu li.hover{    background: #DFDFDF; tab_ Menu li.selected{//background and color for selected options     color: #FFF;      background: #6D84B4; tab_box{  &nbs P Clear:both; Clear influence of float effect     height:100px; Set height of 100px     border:1px solid #898989; Set the border style of the content body}. hide{//hides the content that needs to be hidden div     Display:none;   After the layout is complete, do the jquery action:   Code as follows: <script type = ' Text/javasCript ' > $ (function () {   //1. Change CSS properties when clicked, Remove previous selected options, add new selected options    //2. Hide the div layer before it, Display corresponding div layer    /for navigation Li registered Click event     var $div _li = $ (". Tab_menu ul Li");     $div _li.click (function () {        $ (this). AddClass (' selected '). Siblings (). Removeclass (' selected ');        //var index = $div _li.index (this);        //$ ("Div.tab_box > div"). EQ (index)-show (). siblings (). Hide ();         var text = $ (this). text ();         if (text== ' Current events ')         {            $ ('. tab _box Div:contains ("Current Affairs"). Removeclass (' hide '). Siblings (). addclass (' hide ');        }         if (text== ' sports ')         {    &NBSP ;       $ ('. Tab_box div:contains (' Sport ') '). Removeclass (' hide '). Siblings (). addclass (' hide ');        }        if (text== ' entertainment ')         {            $ ('. tab _box div:contains ("Entertainment"). Removeclass (' hide '). Siblings (). addclass (' hide ');        }    }. Hover (function () {            $ (this). Addclas S ("hover");        },function () {            $ (this) removeclass ("hover");   & nbsp    }); }); </script>   This is the jquery code I wrote, my idea is to click on the tab, add the selected style, and remove the selected style of the Sibling tab.   Another, how to trigger the corresponding tab_box in the content of the hidden and display it?   I found that they have the corresponding content, that is, the option header for "real" the corresponding option is also "real", the options for the "sports" of the corresponding options for "sports" and so on.   I thought, first get the contents of the option header, make a judgment, when it is a different value, it triggers a different effect. The   effect is implemented, but the vulnerability is obvious because not all tabs are headings that correspond to the content body.   Look at the following code: Code as follows: <script type= "Text/javascript" >//<! [cdata[    $ (function () {        var $div _li =$ ("Div.tab_menu ul Li");         $div _li.click (function () {  &NBsp         $ (this). AddClass ("selected")            //current <li> element highlight &nbs P                  .siblings () removeclass ("selected");  //Remove other peers <li> elements highlights             var index =   $div _li.index (this);  //gets the index of the currently clicked <li> element in all LI elements.             $ ("Div.tab_box > div")      //select child nodes. If you do not select a child node, it can cause an error. If there are div                     . EQ (index). Show ()  //Display <li > element corresponding <div> elements                    . Siblings (). Hide (); Hide several other peers <div> elements        })    }//]]> </script>   The processing here is particularly ingenious, and it gets An index of Li that handles the option body. It cleverly utilizes a hidden correspondence, which is the index value.   So even if the option header does not correspond to the content of the option body, you can achieve a linkage effect.   Through this exercise, I think it's good to think about it first. Can find the difference in thinking, can find the gaps, know the gap. Sometimes even your ideas will be better! &nbSp