jquery实现tab菜单切换内容(精简版demo)
更新时间：2023年10月08日 09:51:08 作者：Winn
这篇文章主要为大家介绍了jquery实现tab菜单切换内容的精简方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
效果预览
完整代码
<!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();//没有被选中的内容隐藏
}
</scrip重点总结
- span标签中list属性值（0,1,2,3）用来与四个div内容一一对应
- siblings()。在cont函数中使用siblings()方法来获取除了被选中元素的其他兄弟元素。siblings()是jquery的方法
以上就是jquery实现tab菜单切换内容(精简版demo)的详细内容，更多关于jquery tab菜单切换的资料请关注脚本之家其它相关文章！
相关文章
可见性过滤选择器对于dom中隐藏的一些元素还是比较实用的，具体的使用方法如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-06-06
这篇文章主要介绍了jQuery实现新闻播报滚动及淡入淡出效果,结合实例形式分析了基于jQuery插件的页面元素动态变换相关操作技巧,需要的朋友可以参考下2018-03-03
jQuery缓存系统不仅运用于DOM元素，动画、事件等都有用到这个缓存系统2013-05-05
本文主要分享了jquery实现输入框实时输入触发事件的代码，代码简单易懂，需要的朋友一起来看下吧2016-12-12
一定要注意如果从list的开始元素循环下去，remove掉一个元素后，有些元素就找不到了或者说不是要找的那个元素，感兴趣的各位可以研究下哈2013-06-06
在EasyUI 的Demo 中 只有MenuButton 的显示DEMO，没有click 事件的相关操作，项目中正好用到啦，所以研究了下，可以用js 动态的为menu item 绑定click 事件2012-07-07
jquery中each可用于遍历对象和数组，如需退出each循环可使回调函数返回false，下面有个示例，大家可以看看2014-08-08
jquery滚动图片效果,有些新手朋友可能不是很清楚，今天在网上找到一款回旋滚动效果，拿出来和大家一起分享，感兴趣的朋友可以了解下哦2013-01-01
在IE7~IE8这种不支持HTML5的浏览器上，是利用Flash嵌入的方式实现的签名处理，在支持的HTML5的浏览器上默认采用canvas标签处理签名，可以生成 PNG格式、SVG格式的签名图片。非常适合在IPAD等移动客户端上实现手写签名的，该插件基于JQuery2015-05-05
这篇文章主要介绍了JQuery中ajax方法访问web服务的方法,实例分析了jquery中Ajax方法结合asp.net程序处理web访问的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
最新评论