javascript實現(xiàn)tab響應式切換特效

更新時間：2016年01月29日 08:44:45 作者：沸羊羊一個

這篇文章主要為大家介紹了javascript實現(xiàn)tab響應式切換特效，以一個完整的實例對tab響應式切換特效進行詳細的分析，感興趣的小伙伴們可以參考一下

本文實例講解了tab響應式切換效果，利用js對樣式進行動態(tài)切換即可。多的不說，請看代碼

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 
<title>tab響應式切換效果</title> 
<link rel="stylesheet" href="css/tab.css"> 
<script type="text/javascript" src="js/jquery.js"></script> 
</head> 
<body> 
<!-- 代碼部分begin --> 
<div class="wrap" height="100%"> 
  <div class="tabs" height="20%"> 
    <a href="#" class="active">tab1</a> 
    <a href="#" >tab2</a> 
    <a href="#" >tab3</a> 
  </div>   
  <div class="swiper-container" height="80%"> 
    <div class="swiper-wrapper"> 
    <div class="swiper-slide"> 
      <div class="content-slide contentin" id="contentref1"> 
      tab內容一 
     </div> 
     </div> 
    <div class="swiper-slide"> 
      <div class="content-slide" id="contentref2"> 
       tab內容二 
      </div> 
     </div> 
    <div class="swiper-slide"> 
      <div class="content-slide" id="contentref3"> 
       tab內容三 
      </div> 
     </div> 
   </div> 
  </div> 
</div> 
<script> 
//$("#contentref1").load("CheckRecord1.html"); //初始化加載tab1 
$(".tabs a").each(function(index){ 
    //每一個包裝a的jquery對象都會執(zhí)行function中的代碼 
    //index是當前執(zhí)行這個function代碼的li對應在所有l(wèi)i組成的數(shù)組中的索引值 
    //有了index的值之后，就可以找到當前標簽對應的內容區(qū)域 
    $(this).click(function(){   
      var liNode = $(this); 
      //將原來顯示的內容區(qū)域進行隱藏 
      $(".tabs .active").removeClass("active"); 
      //對有tabin的class定義的li清除tabin的class 
      $(".contentin").removeClass("contentin"); 
      //當前標簽所對應的內容區(qū)域顯示出來 
      $("div").eq(index).addClass("contentin"); 
      $("div.content-slide:eq(" + index + ")").addClass("contentin"); 
      liNode.addClass("active");  
       
      if (index == 0) { 
        //裝入靜態(tài)完成頁面 
        //$("#contentref1").load("CheckRecord1.html"); 
      } else if (index == 1) { 
        //裝入動態(tài)部分頁面 
        //$("#contentref2").load("CheckRecord.jsp"); 
      } else if (index == 2) { 
        //裝入遠程數(shù)據(jù)（這里也是一個動態(tài)頁面輸出的數(shù)據(jù)） 
        //$("#contentref1").load("TabData.jsp") 
      } 
    }); 
  }); 
</script> 
<!-- 代碼部分end --> 
</body> 
</html>

tab.css

body{margin:0;font-family:"microsoft yahei";font-size:13px;line-height:1.5;background:#eee;} 
.wrap{margin:0 auto 0 auto;} 
.tabs{height:25px;} 
.tabs a{display:block;float:left;width:33.33%;color:#333;text-align:center;background:#eee;line-height:25px;font-size:16px;text-decoration:none;} 
.tabs a.active{color:#fff;background:#CDC8B1;border-radius:5px 5px 0px 0px;} 
.swiper-container{background:#CDC8B1;height:100%;border-radius:0 0 5px 5px;width:100%;border-top:0;} 
.swiper-slide{height:100%;width:100%;background:none;color:#fff;} 
div.content-slide {padding:40px;display: none;} 
div.contentin {display: block;}

以上就是本文的全部內容，希望對大家學習javascript程序設計有所幫助。

您可能感興趣的文章: