cari

Rumah >hujung hadapan web >tutorial js >Javascript melaksanakan kemahiran effect_javascript penukaran responsif tab

Javascript melaksanakan kemahiran effect_javascript penukaran responsif tab

WBOY
WBOYasal
2016-05-16 15:17:111577semak imbas

Contoh dalam artikel ini menerangkan kesan penukaran responsif tab dan anda boleh menggunakan js untuk menukar gaya secara dinamik. Tak banyak nak cakap, sila tengok kod 

<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对象都会执行function中的代码 
    //index是当前执行这个function代码的li对应在所有li组成的数组中的索引值 
    //有了index的值之后，就可以找到当前标签对应的内容区域 
    $(this).click(function(){   
      var liNode = $(this); 
      //将原来显示的内容区域进行隐藏 
      $(".tabs .active").removeClass("active"); 
      //对有tabin的class定义的li清除tabin的class 
      $(".contentin").removeClass("contentin"); 
      //当前标签所对应的内容区域显示出来 
      $("div").eq(index).addClass("contentin"); 
      $("div.content-slide:eq(" + index + ")").addClass("contentin"); 
      liNode.addClass("active");  
       
      if (index == 0) { 
        //装入静态完成页面 
        //$("#contentref1").load("CheckRecord1.html"); 
      } else if (index == 1) { 
        //装入动态部分页面 
        //$("#contentref2").load("CheckRecord.jsp"); 
      } else if (index == 2) { 
        //装入远程数据（这里也是一个动态页面输出的数据） 
        //$("#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;}

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pernahkah anda mendengar tentang sistem pengendalian berasaskan JavaScript? _kemahiran javascriptArtikel seterusnya：Pernahkah anda mendengar tentang sistem pengendalian berasaskan JavaScript? _kemahiran javascript

Artikel berkaitan

Lihat lagi