Simple implementation of jQuery tabs

JQuery implements tabs. First, build the interface.

There's the navigation header, tab_menu, and then there's the content, tab_box.

To achieve the effect is, after the click, the corresponding content will be displayed, the rest of the content hidden away.

At the same time, in order to show the selected state, add background for the selected item to show the difference.

This time, I wrote the code myself, looking at the HTML:

<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected"> Current affairs </li>
            <li> sports </li>
            <li> entertainment </li>
        </ul>
    </div>
    <div class="tab_box"> 
         <div> Current affairs </div>
         <div class="hide"> sports </div>
         <div class="hide"> entertainment </div>
    </div>
</div>

In HTML, you need a large div with two child divs, one for the navigation header tab_menu and one for the content body tab_box. The CSS code is responsible for the layout of the HTML content.

The CSS part:

*{
margin:0;
padding:0;
}
.tab{
    width:240px;
    margin:50px;
    
}
.tab_menu{
    clear:both;
}
.tab_menu li{
    float:left;  //Float the navigation head left
    text-align:center;  //Center the text
    list-style:none;  //Mark removal symbol
    background:#F1F1F1; //Set the default background color
    border:1px solid #898989; //Set border color
    margin-right:4px; //The distance between each li is 4px
    cursor:pointer;  //After the mouse floats on, there will be signs of small hands
    padding:1px 6px; //Control the inner distance of li
    border-bottom:none; 

}
.tab_menu li.hover{
    background:#DFDFDF;
}
.tab_menu li.selected{//Add background and color to the selected option
    color:#FFF; 
    background:#6D84B4;
}
.tab_box{
    clear:both; //Be aware of the float effect
    height:100px; //Set the height to 100px
    border:1px solid #898989; //Sets the border style for the content body
}
.hide{//Hide the content divs that need to be hidden
    display:none;
}

After the layout is completed, take jQuery actions:

<script type='text/javascript'>
$(function(){
    //1. Change the CSS property when clicking, remove the previous selected option, and add the new selected option
    //2. Hide the previous div layer to show the div layer
    //Register click events for the li in the navigation
    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 affairs ')
        {
            $('.tab_box div:contains(" Current affairs ")').removeClass('hide').siblings().addClass('hide');
        }
        if(text==' sports ')
        {
            $('.tab_box div:contains(" sports ")').removeClass('hide').siblings().addClass('hide');
        }
        if(text==' entertainment ')
        {
            $('.tab_box div:contains(" entertainment ")').removeClass('hide').siblings().addClass('hide');
        }
    }).hover(function(){
            $(this).addClass("hover");
        },function(){
            $(this).removeClass("hover");
        });
});
</script>

This is the jQuery code that I wrote, and the idea is that when you click on the TAB, you add the selected style, and you remove the selected style from the sibling TAB.

Again, how do you trigger the hiding and display of content in the corresponding tab_box?

I found that they have corresponding contents, that is, the corresponding option body with the header of "facts" is also "facts", and the corresponding option header of "sports" is also "sports" and so on.

I just want to get the contents of the header, make a judgment, and when it's a different value, it triggers a different effect.

The effect is implemented, but the vulnerability is obvious because not all tabs correspond to the body of the content.

Take a look at the following code:

<script type="text/javascript" >
//<![CDATA[
    $(function(){
        var $div_li =$("div.tab_menu ul li");
        $div_li.click(function(){
            $(this).addClass("selected")            //The current <Li> Elements are highlighted
                   .siblings().removeClass("selected");  //Remove other peers <Li> The highlight of the element
            var index =  $div_li.index(this);  //Gets the currently clicked <Li> The index of the element in all li elements.
            $("div.tab_box > div")       //Select the child node. Not selecting child nodes causes an error. If you have div inside
                    .eq(index).show()   //Display <Li> Elements corresponding to <Div> The element
                    .siblings().hide(); //Hiding several other peers <Div> The element
        })
    })
//]]>
</script>

The trick here is to manipulate the option body by getting the index of li. It cleverly exploits a hidden correspondence, the index value.

In this way, the linkage effect can be achieved even if the option header does not correspond to the option body content.

Through this exercise, I think it is good to think for myself first. Can discover the difference of train of thought, just can discover inadequacy, know the gap. Sometimes even your mind is better!