曾经做过一个页面，用到好几处tab选项卡，于是就写了这段代码，可以控制页面所有选项卡切换。只要用我的结构，就可以实现一对多的控制，很方便。
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>控制页面所有Tab切换</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script>
$(function(){
$('.tabControl .tabMenu li').click(function(){
var index=$(this).index();
var $tabMenu=$(this).parents('.tabMenu').next().find('ul > li');
$(this).parent().find('li').removeClass();
$(this).addClass('on');
$tabMenu.removeClass();
$tabMenu.eq(index).addClass('visible');
})
})
</script>
<style type="text/css">
.tabControl{ width:200px }
.tabControl li{ list-style:none }
.tabMenu li{ float:left;margin-left:1px;cursor:pointer;background:#e3e3e3 }
.tabMenu li.on{ background:#ff0000 }
.tabDetail li{ display:none }
.tabDetail ol li{ display:block }
.tabDetail li.visible{ display:block }
</style>
</head>
<body>
<div class="tabControl">
<div class="tabMenu">
<ul>
<li class="on">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</div>
<div class="tabDetail">
<ul>
<li class="visible">
<ol> <!--如果li中有列表用ol-->
<li>内容一</li>
</ol>
</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
</div>
</body>
</html>
扫一扫
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
