How to Implement Tab-tab page function by JS and jquery _javascript skills

The example of this article describes the way JS and jquery Implement tab-tab page function respectively. Share to everyone for your reference, specific as follows:

List styles and HTML tags first

<style type= "Text/css" >
    *{margin:0;padding:0;}
    #myul li {list-style:none; float:left; border:1px solid #ddd; width:100px; height:20px; text-align:center; Line-heig ht:20px;}
    #container div{display:none; width:303px; height:300px; border:1px solid #ddd;}
    #container. Ssd{display:block}
    . Ssl{background: #abcdef;}
</style>
 
 

And then the native JS to implement the TAB tag code

<script type= "Text/javascript" >
var ul = document.getElementById (' Myul ');
var li = ul.getelementsbytagname (' li ');
var con = document.getElementById (' container ');
var div = con.getelementsbytagname (' div ');
var len = li.length;
for (var i = 0; i < len; i++) {
li[i].index = i;
Li[i].onclick=choose;
Li[i].onmouseover = choose;
};
function choose () {for
(var j = 0; J < Len; J + +) {
    li[j].classname = ';
    Div[j].style.display = ' none ';
  }
  This.classname = ' SSL ';
  div[this.index].style.display= ' block ';
}
</script>

Then we use jquery to implement the code as follows

$ (' #myul li '). Click (choose);
$ (' #myul Li '). Hover (choose);
function Choose () {
  $ (this). addclass (' SSL '). Siblings (). Removeclass (' SSL ');
  $ (' #container div '). EQ ($ (a). Index ()). Show (). siblings (). Hide ();

In fact, the function can also simplify:

function Choose () {
  $ (this). addclass (' SSL '). Siblings (). Removeclass (' SSL '). Parent (). Next (), Children (). EQ ( This). Index (). Show (). siblings (). Hide ();
}

More readers interested in JavaScript-related content can view the site topics: "JavaScript switching effects and tips summary", "JavaScript traversal algorithm and tips summary", "JavaScript Search Algorithm Skills summary", " JavaScript animation effects and tips Summary, "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary" and "JavaScript Mathematical Computing Usage Summary"

I hope this article will help you with JavaScript programming.