jQuery 如何实现 tab 菜单切换效果? 下面本篇文章就来给大家通过示例来介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
首先我们来看看效果图:
[相关教程推荐: jQuery 教程 https://www.html.cn/jskuangjia/jquery/ ]
下面我们来看看完整的示例的代码:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <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>
- <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>
- </HTML>
重点总结:
span 标签中 list 属性值 (0,1,2,3) 用来与四个 div 内容一一对应
siblings(). 在 cont 函数中使用 siblings()方法来获取除了被选中元素的其他兄弟元素. siblings()是 jQuery 的方法
本文转载自: https://segmentfault.com/a/1190000021702601
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/16413.html