tab栏切换
Posted qtbb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tab栏切换相关的知识，希望对你有一定的参考价值。
<style>
body,ul,li,divmargin:0;padding: 0;
ulfont-size: 0px;
.tab_list
border: 1px gray solid;
width: 400px;height: 50px;
background: gainsboro;
ul li
list-style: none;display: inline-block;
text-align: center;font-size: 14px;
width: 32.8%;line-height: 50px;
.tab_conwidth:400px;height:120px;
border: 1px solid gainsboro;border-top: 0px;
.tab_con .itemdisplay: none;text-indent: 14px;
line-height: 28px; font-size: 18px;
.currentcolor:snow;background:plum;
</style>
<script>
$(function()
$(".tab_list ul li").mouseover(function()
var inds=$(this).index(); // 获取当前 li 的序号
$(this).addClass("current").siblings().removeClass("current"); //给当前的 li 添加 current 的样式，其他兄弟 li 去掉 current 的样式
$(".tab_con div").eq(inds).show().siblings().hide(); // li 对应的 div显示出来，其他兄弟 div 隐藏
)
)
</script>
</head>
<body>
<div class="tab_list">
<ul>
<li class="current">tab一</li>
<li>tab二</li>
<li>tab三</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block">
tab一的内容
</div>
<div class="item">
tab二的内容
</div>
<div class="item">
tab三的内容
</div>
</div>
以上是关于tab栏切换的主要内容，如果未能解决你的问题，请参考以下文章