一个简单的选项卡的demo

时间:2022-03-16 19:28:41

因为刚接触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>

效果如下:

一个简单的选项卡的demo