tab切换

Posted 2020-09-08 蔡秀芳

　　今天我们开始试着写一些js特效,先写一个简单的tab切换,在现实生活中,一些网站tab切换是必不可少的,来下面让我们一起写一下

1,思路:

　　当点击的时候实现切换并改变里面的内容jQuery实现

2,代码

html代码

 1  <div class="wrapper">
 2         <ul class="tab">
 3             <li class="tab-item active">国际大牌<span>◆</span></li>
 4             <li class="tab-item">美妆名牌<span>◆</span></li>
 5             <li class="tab-item">洗护用品<span>◆</span></li>
 6             <li class="tab-item">男士用品</li>
 7         </ul>
 8         <div class="products">
 9             <div class="main selected">
10                 <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
11             </div>
12             <div class="main">
13                 <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
14             </div>
15             <div class="main">
16                 <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
17             </div>
18             <div class="main">
19                 <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
20             </div>
21         </div>
22     </div>

css代码

 1   body,div,ul,li,ol,dl,dt,p,dd,img,input,a,span,h1,h2,h3,h4{padding:0; margin:0; border:0; list-style:none;}
 2  .wrapper{width:1000px; height: 475px; margin: 0 auto; margin-top: 100px;}
 3  .tab{ border:1px solid #ddd; border-bottom: 0; height: 36px; width: 320px;}
 4  .tab li{ position: relative; float: left; width: 80px; height: 34px; line-height: 34px; text-align: center; cursor: pointer;
 5         border-top:4px solid #fff;}
 6  .tab span{ position: absolute;right: 0;top:10px;background: #ddd;width: 1px;height: 14px;overflow: hidden; }
 7  .products{ width: 1002px;border:1px solid #ddd;height: 476px;}
 8  .products .main{float: left;display: none;}
 9  .products .main.selected{display: block;}
10  .tab li.active{border-color: red; border-bottom: 0;}

jQuery代码

1 $(function(){
2     $(".tab li").mouseenter(function(){
3     var index=$(this).index();
4     $(".tab li").removeClass("active");
5     $(".products div").removeClass("selected");
6     $(this).addClass("active");
7     $(".products div").eq(index).addClass("selected");
8 });
9 });

是不是木有自己想象中的难,写代码就是这把它当做简单的事,就简单,越把它看的难就越难,下次我们要一起学习选项卡吧毕竟现在每个网站都离不开它