jquery实现tab栏切换

<style>

  

* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}

.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}

.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}

.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}

.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}

.products .main {
float: left;
display: none;
}

.products .main.selected {
display: block;
}

.tab li.active {
border-color: red;
border-bottom: 0;
}

</style>

 

<body>

<div class="wrapper">
  <ul class="tab">
      <li class="tab-item active">国际大牌<span>◆</span></li>
      <li class="tab-item">国妆名牌<span>◆</span></li>
      <li class="tab-item">清洁用品<span>◆</span></li>
      <li class="tab-item">男士精品</li>
  </ul>
  <div class="products">
     <div class="main selected">
        <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
     </div>
     <div class="main">
       <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
     </div>
     <div class="main">
       <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
     </div>
     <div class="main">
       <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
     </div>
  </div>
</div>

</body>

<script src="jquery-1.12.2.js"></script>

<script>

$(function () {
   $(".tab>li").mouseenter(function () {
       var index=$(this).index();//获取当前鼠标进入的li标签的索引
       $(this).addClass("active").siblings("li").removeClass("active");
      //设置div的类样式

       $(".products>div:eq("+index+")").addClass("selected").siblings("div").removeClass("selected");
  });
});

</script>

posted @ 2018-06-28 16:14  菜鸡~大神  阅读(147)  评论(0)    收藏  举报