HTML
<div id="tab">
<ul id="tabs" class="clearfix">
<li class="current" οnclick="setTab(0)"><a href="#">TAB-1</a></li>
<li οnclick="setTab(1)"><a href="#">TAB-2</a></li>
<li οnclick="setTab(2)"><a href="#">TAB-3</a></li>
</ul>
<ul id="contents">
<li class="current">Content-1</li>
<li class="hide">Content-2</li>
<li class="hide">Content-3</li>
<ul>
</div>
JS
function setTab(n){
var tli = document.getElementById("tabs").getElementsByTagName("li");
var cli = document.getElementById("contents").getElementsByTagName("li");
for(var i=0;i<tli.length;i++){
tli[i].className=i==n?"current":"";
cli[i].className=i==n?"current":"hide";
}
}
CSS
body {
background: #FFF;
color: #000;
font: 62.5% "Lucida Grande", Verdana, Geneva, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
ul{
padding:0;
margin:0;
list-style:none;
}
li{
padding:10px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
#tab{
width:600px;
margin:100px auto;
}
#tabs li{
float:left;
}
.current{
background:#EEE;
display:block;
}
.hide{
display:none;
}
jQuery写法
$(document).ready(function(){
$("#contents > li").hide();
$("#tabs li:first").addClass("current").show();
$("#contents li:first").addClass("current").show();
$("#tabs li").click(function(){
$("#contents > li").hide();
$("#tabs li").removeClass("current");
$(this).addClass("current");
var activeTab = $(this).find("a").attr("href");
$(activeTab).addClass("current").show();
});
});
HTML
<div id="tab">
<ul id="tabs" class="clearfix">
<li><a href="#content_1">TAB-1</a></li>
<li><a href="#content_2">TAB-2</a></li>
<li><a href="#content_3">TAB-3</a></li>
</ul>
<ul id="contents">
<li id="content_1">Content-1</li>
<li id="content_2">Content-2</li>
<li id="content_3">Content-3</li>
<ul>
</div>
1. Javascirpt 写法在于利用setTab()函数传参数,通过参数将tabs>li与 contents>li配对.
2. jQuery写法利用href属性获取参数, 通过href参数值配对.
3. HTML有所区别