今天我们开始试着写一些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{1000px; height: 475px; margin: 0 auto; margin-top: 100px;} 3 .tab{ border:1px solid #ddd; border-bottom: 0; height: 36px; 320px;} 4 .tab li{ position: relative; float: left; 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; 1px;height: 14px;overflow: hidden; } 7 .products{ 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 });
是不是木有自己想象中的难,写代码就是这把它当做简单的事,就简单,越把它看的难就越难,下次我们要一起学习选项卡吧毕竟现在每个网站都离不开它