js和jquery分别实现tab标签页

来源:互联网 发布:lol台服网络加速器 编辑:程序博客网 时间:2024/05/24 01:43

首先列出样式和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
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 直冲式马桶堵了怎么办 天梭手表不走了怎么办 机械表老是快该怎么办 机械表有误差 那怎么办 机械表走的快怎么办 新车加了燃油宝怎么办 车离合器片烧了怎么办 车的离合片烧了怎么办 鱼缸没电了缺氧怎么办 水箱的浮球失灵怎么办 鱼缸底滤停电1天怎么办 底滤鱼缸声音大怎么办 马桶提升泵坏了怎么办 汽车前玻璃起雾怎么办 下雨车玻璃起雾怎么办 车玻璃外面起雾怎么办 汽车内玻璃起雾怎么办 汽车前挡风起雾怎么办 车窗内玻璃起雾怎么办 早晨车玻璃起雾怎么办 开空调玻璃起雾怎么办 吹空调闭汗了怎么办 空调吹久了头疼怎么办 吹热空调还头疼怎么办 空调吹多了头痛怎么办 被空调吹的头痛怎么办 空调吹的肩膀疼怎么办 吹空调恶心想吐怎么办 被乙肝的针扎了怎么办 孩子脖子睡歪了怎么办 空调吹得全身疼怎么办 吹空调手关节疼怎么办 空调吹的浑身疼怎么办 风吹的胳膊腿疼怎么办 孕妇腿疼的厉害怎么办 夏天嗓子干痒咳嗽怎么办 喉咙又干又痛怎么办 嗓子吞口水都疼怎么办 喉咙痛怎么办咽口水都痛 开空调皮肤太干怎么办 冬天开空调太干怎么办