JQ简单的选项卡

Posted 2020-10-03

$(function(){

 $(".nav dd").click(function(){           $(‘.nav dd‘).eq($(this).index()).addClass("active").siblings().removeClass("active");

  $(".div1 ul li").hide().eq($(this).index()).show();

    })

})

 

 

 

  <div class="nav">
   <dl>
    <dd class="active">1</dd>
    <dd>2</dd>
    <dd>3</dd>
   </dl>
  </div>
  
  <div class="div1">
   <ul>
    <li><img src="img/1.jpg"/></li>
    <li><img src="img/2.jpg"/></li>
    <li><img src="img/3.jpg"/></li>
   </ul>
  </div>

 

 

div,body,ul,li,img,dd,dl{
 margin:0;
 padding:0;
}
.nav{
    width:100px;
    height:14px;
    position:absolute;
    bottom:10px;
    right:20px;
    z-index: 10000;
    left: 50%;
    margin-left: -50px
}
.nav dl dd{
 list-style-type:none;
 width:12px;
 height:12px;
 float:left;
 margin-right:5px;
 cursor:pointer;
    border:1px solid #fff;
}
.nav dl .bg{
 background:#ff7300;
 width:14px;
 height:14px;
 border:none;
}
.nav dl dd.active{
 background:red;
 color:red;
}
.div1{
 height:672px;
 position: relative;
}
ul{
 width:100%;
 height:672px;
 position:relative;
}
ul li{
 list-style:none;
 position:absolute;
 width:100%;
 height:672px;
}
ul li img{
 width:100%;
 height:672px;
}
ul li:first-child{
 z-index: 999;
}
ul li:nth-child(2){
 z-index:888;
}
ul li:last-child{
 z-index:111;
}