HTML:
<div class="tab-Main">
<div class="tab-ControlPanel">
<div class="tab-TabSpan">标题1</div>
<div class="tab-TabSpan">标题2</div>
<div class="tab-TabSpan">标题3</div>
</div>
<div class="tab-Container">
<div class="tab-Content">内容111</div>
<div class="tab-Content">222内容</div>
<div class="tab-Content">3内容33</div>
</div>
</div>
样式:
<style type="text/css">
.tab-Main{
width: 500px;
}
.tab-ControlPanel{
float: left;
width: 100%;
color: white;
}
.tab-TabSpan{
float: left;
padding-left:9px;
padding-right:9px;
margin-left:2px;
margin-right:2px;
display: inline;
cursor:pointer;
background-color: #77ADE3;
}
.tab-TabSpan-Selected{
background-color: #3485D6;
}
.tab-TabSpan-Hover{
background-color: #3485D6;
}
.tab-Container{
float: left;
width: 100%;
margin-left: 2px;
border: 1px solid #3485D6;
}
.tab-Content{
width:100%;
float: left;
display: none;
}
</style>
JQuery代码:
<SCRIPT type="text/javascript"> $(function(){ var $tabSpans = $(".tab-TabSpan"); var $contents = $(".tab-Content"); $(".tab-TabSpan").click(function(){ var index = $tabSpans.index(this); $tabSpans.eq(index).addClass("tab-TabSpan-Selected").siblings().removeClass("tab-TabSpan-Selected"); $contents.eq(index).slideDown().siblings().slideUp(); }) $(".tab-TabSpan").mouseover(function(){ $(this).addClass("tab-TabSpan-Hover").siblings().removeClass("tab-TabSpan-Hover"); }) $(".tab-TabSpan").mouseout(function(){ $(this).removeClass("tab-TabSpan-Hover"); }) $tabSpans.eq(0).click(); }) </SCRIPT>