jquery 通用TAB
一、Html结构
<body>
<div>
<ul class="b ">
<li class="c activeTag"><a href="#">标签一</a></li>
<li class="c"><a href="#">标签二</a></li>
<li class="c"><a href="#">标签三</a></li>
<li class="c"><a href="#">标签四</a></li>
<li class="c"><a href="#" class="d-none">标签五</a></li>
</ul>
<div class="contentShow">
<div class="content">标签一的内容</div>
<div class="content content-none">标签二的内容</div>
<div class="content content-none">标签三的内容</div>
<div class="content content-none">标签四的内容</div>
<div class="content content-none">标签五的内容</div>
</div>
</div>
</body>
</html>
二、CSS渲染
<style>
*{
padding:0;
margin:0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
font-family: '微软雅黑',Arial;
}
ul{
display:table;
border:1px solid red;
height:200px;
border-bottom:0px;
margin:0px auto;
}
ul li{
width:100px;
float:left;
height:200px;
border-bottom:1px solid blue;
padding-top:50px;
list-style:none;
}
ul li a{
display:inline-block;
width:100%;
height:100px;
line-height:100px;
border-right:1px solid yellow;
text-align:center;
text-decoration:none;
color:#000000;
}
.d-none{
border-right:0px!important;
}
ul li:hover{
width:101px;
margin-left:-1px;
margin-right:-1px;
border-left:1px solid blue;
border-right:1px solid blue;
border-bottom:0px;
}
ul li:hover a{
border-right:0px;
color:red;
}
.activeTag{
width:101px;
margin-left:-1px;
margin-right:-1px;
border-left:1px solid blue;
border-right:1px solid blue;
border-bottom:0px;
}
.activeTag a{
border-right:0px;
color:red;
}
.content{
width: 502px;;
height:400px;
border:1px solid pink;
border-top:none;
margin:0px auto;
text-align:center;
}
.content-none{
display:none;
}
Tab初始界面入下图所示：
进行切换时为下图所示
图中红框为ul边框，蓝色为li边框，黄色为a边框，做tab切换的时候，隐去a的边框颜色，显示li的边框颜色，因为在网页中设置boeder:0px;
内含元素设置border的话，若宽度继承父元素的话，ul、li、a是依次在网页中显示边框，为了在切换的时候，ul能够覆盖掉左边的ul边框，右边的a边框
ul不设置宽度，将其display:table,这样ul的宽度就会随着li的宽度变化而变化，li设置宽度并且该宽度被a继承，在变化的时候，将li的宽度加1，并设置
margin-left:-1px,li边框覆盖左侧边框，为了覆盖右侧的ul边框，需要设置margin-right:-1px;为了在变化的时候隐去a的边框，需要将border-right:0px,
隐藏右边框。但是在静态的最右侧会出现a标签与ul边框重合，可以设置class并且将border-right:0px设置为！import。
三、JS代码
<script type="text/javascript">
// JavaScript Document
$(function(){
function tabs(tabTit,on,tabCon){
//给标签ul的子元素li添加鼠标滑过事件
$(tabTit).children().hover(function(){
//利用addClass给li添加类on,遍历一遍后移去该类
$(this).addClass(on).siblings().removeClass(on);
//获取ul中li是哪个
var index = $(tabTit).children().index(this);
//相同的显示，不相同的隐藏，遍历循环进行。
$(tabCon).children().eq(index).show().siblings().hide();
});
};
tabs(".b","activeTag",".contentShow");
});
</script>
