JavaScript instance: Tab Toggle Effect

We usually use the tab switch effect, the following figure:

This effect is very common, with JS can be achieved.

Layout Analysis:

We can first let one of the content display, the other content first hidden, when the user clicks on the head tag, you can let the current content hidden, click on the part of the content displayed. This can be achieved by changing the label style.

HTML, CSS code is as follows:

<! DOCTYPE html>  
I used two kinds of ideas to achieve this effect.

Idea of a

First, each navigation block can be labeled a index, so that users click on the navigation block, the first of all Li and Tab-con in the classname of the child Div, and then through the index tag, Set the clicked navigation Block and the corresponding Div classname respectively to on and selected.

<script>
        var lis = document.getElementById ("Tab-nav"). getElementsByTagName ("Li");
        var divs = document.getElementById ("Tab-con"). getElementsByTagName ("div");
        for (var i=0;i< lis.length;i++) {
            lis[i].index = i;
            Lis[i].onclick = function () {for
                (var j=0;j<divs.length;j++) {
                    lis[j].classname= ";
                    Divs[j].classname= "";
                }
                Lis[i].classname = "on";
                Divs[this.index].classname= "selected";
            }
</script>
 
Idea Two

After each click of the event, the navigation block for a traverse to determine, find this click of the navigation block, the navigation block and the corresponding Div classname change, and the other classname empty.

<script> var lis = document.getElementById ("Tab-nav"). getElementsByTagName ("Li");
        var divs = document.getElementById ("Tab-con"). getElementsByTagName ("div"); for (Var i=0;i<lis.length;i++) {Lis[i].onclick = function () {for (Var i=0;i<lis.length;i++
                        {if (this = = Lis[i]) {lis[i].classname = ' on ';
                    Divs[i].classname = "selected";
                        else {lis[i].classname = "";
                    Divs[i].classname = ""; </script> 
}}}}