Home > Article > Web Front-end > How to implement the tab page function using js and jquery respectively
The example in this article describes how js and jquery implement the tab page function respectively. Share it with everyone for your reference, the details are as follows:
First list the styles and html tags
<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-height: 20px;}
#container div{display: none; width: 303px; height: 300px; border: 1px solid #ddd; }
#container .ssd{display: block;}
.ssl{background: #abcdef;}
</style>
</head>
<body>
<div id="tab">
<ul id="myul">
<li class="ssl">1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="container">
<div class="ssd">woshi1</div>
<div>woshi2</div>
<div>woshi3</div>
</div>
</div>
</body>Then the native js code to implement the tab tag
<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($(this).index()).show().siblings().hide();
}
In fact, the function can be simplified:
function choose(){
$(this).addClass('ssl').siblings().removeClass('ssl').parent().next().children().eq($(this).index()).show().siblings().hide();
}