今天我們開始試着寫一些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 }); 是不是木有自己想象中的難,寫代碼就是這把它當做簡單的事,就簡單,越把它看的難就越難,下次我們要一起學習頁籤吧畢竟現在每個網站都離不開它