js和jquery分别实现tab标签页

来源：互联网发布：lol台服网络加速器编辑：程序博客网时间：2024/05/13 07:52

首先列出样式和html标签

<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>

然后就是原生的js 实现tab标签的代码

 <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>

那我们改用jquery实现代码如下

       $('#myul li').click(choose);       $('#myul li').hover(choose);        function choose(){        $(this).addClass('ssl').siblings().removeClass('ssl');        $('#container div').eq($(this).index()).show().siblings().hide();        }

其实函数还可以简化

function choose(){        $(this).addClass('ssl').siblings().removeClass('ssl').parent().next().children().eq($(this).index()).show().siblings().hide();        }

0 0