程序员之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery tab菜单切换

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

 更新时间：2023年10月08日 09:51:08   作者：Winn  
这篇文章主要为大家介绍了jquery实现tab菜单切换内容的精简方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

效果预览

完整代码

<!DOCTYPE?html>  
<html>  
<head>  
<title>jquery实现tab菜单切换内容（精简版）</title>  
<script?src="http://9i0i.com/pic.php?p=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();//没有被选中的内容隐藏  
? ???}  
 </scrip

重点总结

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

以上就是jquery实现tab菜单切换内容(精简版demo)的详细内容，更多关于jquery tab菜单切换的资料请关注程序员之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论

?


http://www.vxiaotou.com