为了账号安全,请及时绑定邮箱和手机立即绑定

jquery实现tab菜单切换内容(精简版)

2020.02.14 15:50 5438浏览

效果预览:

图片描述

完整代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>jquery实现tab菜单切换内容(精简版)</title>
 5 <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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的方法

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

2人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消