因为刚接触jquery不久，好多都是用的别人的demo,现在也慢慢地学着自己写写，今天做了一个选项卡的简单的例子，整个例子写完之后感觉还是页面样式css更多与jquery。下面进入正题。在整个例子中就是样式的移除removeClass()与添加addClass()两个方法。很简单，下面附上自己的源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#tabBackground li").each(function() {
$(this).click(function(){
var index=$(this).index("li"); //得到选择的选项的index
$(this).siblings(".tabBackgroundActive").removeClass("tabBackgroundActive"); //移除当前选择的样式
$("li:eq("+index+")").addClass("tabBackgroundActive"); //给当前选择的样式添加样式
$(".divBackground.divContentActive").removeClass("divContentActive"); //将内容删除掉
$(".divBackground:eq("+index+")").addClass("divContentActive") //将选项卡对应的内容添加样式
})
});
});
</script>
<style type="text/css">
#tab{
width:300px;
margin:0 auto;
}
ul{list-style:none;}
li{
float:left;
width:50px;
height:25px;
margin:0 auto;
text-align:center;
padding-top:5px;
margin-right:10px;
background-color: #D3E0F2;
color: #15428B;
cursor:pointer;
border-top-left-radius:5px;
border-top-right-radius:5px;
border:0px solid #15428B;
}
.tabBackgroundActive{
background-color: #DEECFD;
border: 1px solid red;
color:red;
border-bottom:0px solid red;
}
.divBackground{clear:both;
margin:0 auto;
background-color:#DEECFD;
width:220px;
height:200px;
display:none;
border-radius:10px;
text-align:center;
padding-top:10px;
border:1px solid red;
}
.divContentActive{
display:block;
position: absolute;
z-index:-1;
margin-top:30px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="tab">
<ul id="tabBackground">
<li class="tabBackgroundActive">tab A</li>
<li>tab B</li>
<li>tab C</li>
</ul>
<div class="divBackground divContentActive">
tab 1 content
</div>
<div class="divBackground">
tab 2 content
</div>
<div class="divBackground">
tab 3 conetent
</div>
</div>
</body>
</html>效果如下：
