效果预览:
image
完整代码:
- <!DOCTYPE html>
- <HTML>
- <head>
- <title>
- jQuery 实现 tab 菜单切换内容(精简版)
- </title>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- </head>
- <body>
- <!-- 这是菜单 -->
- <div>
- <span style="background-color: red;cursor: pointer;" list="0" onclick="tab(this)">
- 我是 A
- </span>
- <span style="background-color: blue;cursor: pointer;" list="1" onclick="tab(this)">
- 我是 B
- </span>
- <span style="background-color: orange;cursor: pointer;" list="2" onclick="tab(this)">
- 我是 C
- </span>
- <span style="background-color: green;cursor: pointer;" list="3" onclick="tab(this)">
- 我是 D
- </span>
- </div>
- <!-- 这是菜单对应的内容 -->
- <div class="content">
- <div style="background-color: red" onclick="cont(this)">
- 我是 A 的内容
- </div>
- <div style="background-color: blue;display: none" onclick="cont(this)">
- 我是 B 的内容
- </div>
- <div style="background-color: orange;display: none" onclick="cont(this)">
- 我是 C 的内容
- </div>
- <div style="background-color: green;display: none" onclick="cont(this)">
- 我是 D 的内容
- </div>
- </div>
- </body>
- </HTML>
- <script type="text/javascript">
- // 点击菜单执行函数
- function tab(param) {
- var sp_an=$(param).attr('list');// 获取被点击菜单的 list 属性值(0,1,2,3)
- $('.content').children('div').eq(sp_an).click();// 点击菜单后, 对应的内容被点击, 从而实现展示
- // 使用 click()方法模拟点击事件, 触发下面的 cont 函数
- }
- // 这个函数的触发是通过点击菜单的时候触发的
- function cont(param){
- $(param).show();// 被选中的内容显示
- $(param).siblings().hide();// 没有被选中的内容隐藏
- }
- </script>
重点总结:
1.span 标签中 list 属性值 (0,1,2,3) 用来与四个 div 内容一一对应
2.siblings(). 在 cont 函数中使用 siblings()方法来获取除了被选中元素的其他兄弟元素. siblings()是 jQuery 的方法
来源: http://www.jianshu.com/p/4e35a21dd764