jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > jquery tab菜单切换

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

作者: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

重点总结

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

您可能感兴趣的文章:
阅读全文