<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 实现 一个页面 多个tab</title>
<style type="text/css">
ul{
list-style:none;
margin:0px;
padding:0px;
}
#mytabs{
position:relative;
}
#mytabs ul.tab_title{
height:30px;
line-height:30px;
font-size:14px;
}
#mytabs ul.tab_title li{
float:left;
padding:0 15px;
border:1px solid #F00;
border-bottom:none;
position:relative;
cursor:pointer;
margin-right:5px;
}
#mytabs ul li.one{
background:#6FF;
}
#mytabs ul li.two{
background:url(../images/tab_bg_3.png) repeat-x;
}
#mytabs .content {
padding:5px;
font-size:12px;
width:330px;
border:1px solid #F00;
height:auto;
position:absolute;
top:30px;
z-index:-1;
background:#6FF;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*$(‘.ct:gt(0)‘).hide();*/
var hdw = $(‘.tab_title li‘);
/* 注： tab_title 只能为class（即 class=‘tab_title‘）才不会出现兼容性问题，使用id="tab_title" 在ie6、ie7下无法实现一个页面多个tab的切换控制，原因未知，谁要是知道留个言吧 */
hdw.click (function(){
$(this).addClass(‘one‘).siblings().removeClass();
var hdw_index = hdw.index(this);
$(‘.ct‘).eq(hdw.index(this)).show().siblings().hide();
});
});
</script>
</head>
<body>
<div id="mytabs">
<ul class="tab_title">
<li class="one">菜单一</li>
<li>菜单二</li>
<li>菜单三 </li>
</ul>
<div class="content">
<div class="ct">111111111</div>
<div class="ct" style="display:none">111111111111111111111111111</div>
<div class="ct" style="display:none">11111111111111111111111111111111111</div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<div id="mytabs">
<ul class="tab_title">
<li class="one">菜单一</li>
<li>菜单二</li>
<li>菜单三 </li>
</ul>
<div class="content">
<div class="ct">2</div>
<div class="ct" style="display:none">2222</div>
<div class="ct" style="display:none">2222222222</div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<div id="mytabs">
<ul class="tab_title">
<li class="one">菜单一</li>
<li>菜单二</li>
<li>菜单三 </li>
</ul>
<div class="content">
<div class="ct">3333333</div>
<div class="ct" style="display:none">3333333333333333333333</div>
<div class="ct" style="display:none">33333333333333333333333333</div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<div id="mytabs">
<ul class="tab_title">
<li class="one">菜单一</li>
<li>菜单二</li>
<li>菜单三 </li>
</ul>
<div class="content">
<div class="ct">4444444444444</div>
<div class="ct" style="display:none">44444444444444444444444</div>
<div class="ct" style="display:none">4444444444444444444444444444</div>
</div>
</div>
</body>
</html>