今天简单的用四种方法来实现标签页的切换，上上代码你一眼就可以看清楚
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{ overflow: hidden; } ul li{ float: left; list-style: none; } ul li a{ display: block; 100px; height: 30px; text-align: center; line-height: 30px; border: 1px solid #ccc; text-decoration: none; } .box{ 400px; height: 400px; } .box>div:nth-child(1){ 400px; height: 400px; background-color: black; } .box>div:nth-child(2){ 400px; height: 400px; background-color: blue; } .box>div:nth-child(3){ 400px; height: 400px; background-color: pink; } .box>div:nth-child(4){ 400px; height: 400px; background-color: red; } .yy{ display: block; } .hezi{ display: none; } </style> </head> <body> <ul> <li><a href="">周杰伦</a></li> <li><a href="">冯小刚</a></li> <li><a href="">李宇春</a></li> <li><a href="">刘德华</a></li> </ul> <div class="box"> <div class=""></div> <div class="hezi"></div> <div class="hezi"></div> <div class="hezi"></div> </div> <script src="js/jquery-3.0.0.js"></script> <script> $("ul li a").click(function(){ index=$(this).parent().index(); // $(".box div").eq(index).addClass("yy"); // $(".box div").eq(index).removeClass("hezi"); var cla=$(".box div").eq(index).attr("class"); if(cla==" "||cla=="hezi"){ $(".box div").eq(index).attr("class","yy").siblings().attr("class","hezi"); } return false; }) </script> </body> </html>
这种方法是隐藏box盒子里面的三个div，只显示第一个div出来，然后当点击a的时候先得到当前a元素的父元素li的索引值，为什么要得到索引值呢，应为这个索引值和下面box下面div盒子的索引是对应的所以获得了li的索引也就是获得了下面div的索引，那这就好办了，现在我们在来得到相对应的div，怎么得到呢
$(".box div").eq(index).attr("class");这串代码就可以找到相对应的div的盒子，我们再来获取这个盒子的class属性，并将它放在一个变量里面，再来做一个判断，思路很简单，在来看看更简单的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{ overflow: hidden; } ul li{ float: left; list-style: none; } ul li a{ display: block; 100px; height: 30px; text-align: center; line-height: 30px; border: 1px solid #ccc; text-decoration: none; } .box{ 400px; height: 400px; } .box>div:nth-child(1){ 400px; height: 400px; background-color: black; } .box>div:nth-child(2){ 400px; height: 400px; background-color: blue; } .box>div:nth-child(3){ 400px; height: 400px; background-color: pink; } .box>div:nth-child(4){ 400px; height: 400px; background-color: red; } .yy{ display: block; } .hezi{ display: none; } </style> </head> <body> <ul> <li><a href="">周杰伦</a></li> <li><a href="">冯小刚</a></li> <li><a href="">李宇春</a></li> <li><a href="">刘德华</a></li> </ul> <div class="box"> <div class=""></div> <div class="hezi"></div> <div class="hezi"></div> <div class="hezi"></div> </div> <script src="js/jquery-3.0.0.js"></script> <script> $("ul li a").click(function(){ index=$(this).parent().index(); $(".box div").eq(index).removeClass("hezi").siblings().addClass("hezi"); return false; }) </script> </body> </html>
$(".box div").eq(index).removeClass("hezi").siblings().addClass("hezi");这句代码是中心点，获取当前的div之后移除类名hezi，移除以后就恢复块状了，就显示出来了，
那么它的兄弟就添加类名hezi，那么它的兄弟就隐藏起来了，不过这种方法有点反人类，移除显示，添加反而隐藏，那就来看看不反人类的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{ overflow: hidden; } ul li{ float: left; list-style: none; } ul li a{ display: block; 100px; height: 30px; text-align: center; line-height: 30px; border: 1px solid #ccc; text-decoration: none; } .box{ 400px; height: 400px; } .box>div{ display: none; } .box>div:nth-child(1){ 400px; height: 400px; background-color: black; } .box>div:nth-child(2){ 400px; height: 400px; background-color: blue; } .box>div:nth-child(3){ 400px; height: 400px; background-color: pink; } .box>div:nth-child(4){ 400px; height: 400px; background-color: red; } .box .yy{ display: block; } </style> </head> <body> <ul> <li><a href="">周杰伦</a></li> <li><a href="">冯小刚</a></li> <li><a href="">李宇春</a></li> <li><a href="">刘德华</a></li> </ul> <div class="box"> <div class="yy"></div> <div></div> <div></div> <div></div> </div> <script src="js/jquery-3.0.0.js"></script> <script> $("ul li a").click(function(){ index=$(this).parent().index(); $(".box div").eq(index).addClass("yy").siblings().removeClass("yy"); return false; }) </script> </body> </html>
这种方法是现将所有的div隐藏起来，只显示第一个div，接着就是将获取到的div添加类名yy，这个获得到的div就是快状元素了，其余的移除yy,那么其余的元素就恢复到了默认样式隐藏。这里需要注意的一点就是显示将所有的div隐藏，又让一个div显示出来，这儿就有一个权重值的事了，一定的注意。
再来看看用.css()方法，这是最简单的方法，不过不推荐使用
$(".box div").eq(index).css("display","block").siblings().css("display","none");
主要的代码就是这一段。看看你就明白了
。
另外说说为什么得在最后加上return false，这是因为点击的时间是发生在a元素上的，a本是链接，点击是会刷新页面的，所以必须要去除它刷新页面的属性，所以才会加上
return false;
好了。祝大家感恩节快乐
