快捷導(dǎo)航

javascript實(shí)現(xiàn)tab響應(yīng)式切換特效

更新時(shí)間：2016年01月29日 08:44:45 作者：沸羊羊一個(gè)

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

本文實(shí)例講解了tab響應(yīng)式切換效果，利用js對(duì)樣式進(jìn)行動(dòng)態(tài)切換即可。多的不說(shuō)，請(qǐng)看代碼

<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響應(yīng)式切換效果</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內(nèi)容一 
     </div> 
     </div> 
    <div class="swiper-slide"> 
      <div class="content-slide" id="contentref2"> 
       tab內(nèi)容二 
      </div> 
     </div> 
    <div class="swiper-slide"> 
      <div class="content-slide" id="contentref3"> 
       tab內(nèi)容三 
      </div> 
     </div> 
   </div> 
  </div> 
</div> 
<script> 
//$("#contentref1").load("CheckRecord1.html"); //初始化加載tab1 
$(".tabs a").each(function(index){ 
    //每一個(gè)包裝a的jquery對(duì)象都會(huì)執(zhí)行function中的代碼 
    //index是當(dāng)前執(zhí)行這個(gè)function代碼的li對(duì)應(yīng)在所有l(wèi)i組成的數(shù)組中的索引值 
    //有了index的值之后，就可以找到當(dāng)前標(biāo)簽對(duì)應(yīng)的內(nèi)容區(qū)域 
    $(this).click(function(){   
      var liNode = $(this); 
      //將原來(lái)顯示的內(nèi)容區(qū)域進(jìn)行隱藏 
      $(".tabs .active").removeClass("active"); 
      //對(duì)有tabin的class定義的li清除tabin的class 
      $(".contentin").removeClass("contentin"); 
      //當(dāng)前標(biāo)簽所對(duì)應(yīng)的內(nèi)容區(qū)域顯示出來(lái) 
      $("div").eq(index).addClass("contentin"); 
      $("div.content-slide:eq(" + index + ")").addClass("contentin"); 
      liNode.addClass("active");  
       
      if (index == 0) { 
        //裝入靜態(tài)完成頁(yè)面 
        //$("#contentref1").load("CheckRecord1.html"); 
      } else if (index == 1) { 
        //裝入動(dòng)態(tài)部分頁(yè)面 
        //$("#contentref2").load("CheckRecord.jsp"); 
      } else if (index == 2) { 
        //裝入遠(yuǎn)程數(shù)據(jù)（這里也是一個(gè)動(dòng)態(tài)頁(yè)面輸出的數(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;}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: