60

效果预览:

3.gif

完整代码:

1 <!DOCTYPE html>  
2 <html>  
3 <head>  
4 <title>jquery实现tab菜单切换内容(精简版)</title>  
5 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>  
6 </head>  
7 <body>  
8 <!-- 这是菜单 -->  
9 <div>  
10 <span style="background-color: red;cursor: pointer;" list="0" onclick="tab(this)" >我是A</span>  
11 <span style="background-color: blue;cursor: pointer;" list="1" onclick="tab(this)" >我是B</span>  
12 <span style="background-color: orange;cursor: pointer;" list="2" onclick="tab(this)" >我是C</span>  
13 <span style="background-color: green;cursor: pointer;" list="3" onclick="tab(this)" >我是D</span>  
14 </div>  
15 <!-- 这是菜单对应的内容 -->  
16 <div class="content">  
17 <div style="background-color: red" onclick="cont(this)">我是A的内容</div>  
18 <div style="background-color: blue;display: none"   onclick="cont(this)" >我是B的内容</div>  
19 <div style="background-color: orange;display: none" onclick="cont(this)" >我是C的内容</div>  
20 <div style="background-color: green;display: none"  onclick="cont(this)" >我是D的内容</div>  
21 </div>  
22   
23 </body>  
24 </html>  
25 <script type="text/javascript">  
26   
27     //点击菜单执行函数  
28     function tab(param) {  
29         var sp_an=$(param).attr('list');//获取被点击菜单的list属性值(0,1,2,3)  
30         $('.content').children('div').eq(sp_an).click();//点击菜单后,对应的内容被点击,从而实现展示  
31         //使用click()方法模拟点击事件,触发下面的cont函数  
32       }  
33   
34     //这个函数的触发是通过点击菜单的时候触发的  
35     function cont(param){  
36         $(param).show();//被选中的内容显示  
37         $(param).siblings().hide();//没有被选中的内容隐藏  
38     }  
39   
40 </script>

重点总结:

  1. span标签中list属性值(0,1,2,3)用来与四个div内容一一对应
  2. siblings()。在cont函数中使用siblings()方法来获取除了被选中元素的其他兄弟元素。siblings()是jquery的方法

最后

觉得文章不错的,给我点个赞哇,关注一下呗!
技术交流可关注微信公众号【GitWeb】,加我好友一起探讨

logo.png


Winn
2.7k 声望2.9k 粉丝

国内头部医美企业全栈开发者