效果预览：
完整代码：
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>
重点总结：
- span标签中list属性值（0,1,2,3）用来与四个div内容一一对应
- siblings()。在cont函数中使用siblings()方法来获取除了被选中元素的其他兄弟元素。siblings()是jquery的方法
最后
觉得文章不错的，给我点个赞哇，关注一下呗！
技术交流可关注微信公众号【GitWeb】，加我好友一起探讨
原文地址：https://segmentfault.com/a/1190000021702601
