选项卡tab2

选项卡tab2,第1张

选项卡tab2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0; padding: 0}
li{list-style: none}
a{text-decoration: none; color: #333}
.box{ width: 600px; height: 210px; margin: 50px auto 0; overflow: hidden; }
.tab_item{float: left; width: 390px; height: 210px; border-right: 1px solid #ddd; background-color: #ddd; }
.tab_item .tab_content{ height: 210px; text-align: center; line-height: 210px; font-size: 35px; } .tab_ui{ float: right; width: 200px; }
.tab_ui li{ width: 200px; text-align: center; background-color: #C84E69; }
.tab_ui li a{ display: block; height: 50px; line-height: 50px; margin-bottom: 3px; color: #fff; font-size: 20px;}
.tab_ui li.current a{ background-color: #49A945; color: #fff;}
</style>
</head>
<body>
<div class="box">
<div class="tab_item" id="tab_item">
<div class="tab_content">春天的内容</div>
<div class="tab_content" style="display: none;">夏天的内容</div>
<div class="tab_content" style="display: none;">秋天的内容</div>
<div class="tab_content" style="display: none;">冬天的内容</div>
</div>
<ul class="tab_ui" id="tab_ui">
<li class="current"><a href="javascript:;">春</a></li>
<li><a href="javascript:;">夏</a></li>
<li><a href="javascript:;">秋</a></li>
<li><a href="javascript:;">冬</a></li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//选项卡
$(function(){
//点击li事件
$("#tab_ui li").click(function(){
//添加当前状态current,它的同辈元素(siblings)移除当前状态current
$(this).addClass('current').siblings('li').removeClass('current');
var z = $(this).index();//索引
//遍历找到对应的内容显示,同辈元素隐藏
$("#tab_item .tab_content").eq(z).show().siblings('#tab_item .tab_content').hide();
});
})
</script> </body>
</html>

效果图:

注意:

若a标签中的href加“#”符号,如图

则,脚本应该多加一句,“return false” 阻止跳转的意思,如图:

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/589124.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存