檔案下載:http://www.sufile.com/file/6261fecfa5bdb8cb.html
<!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>
留言列表
