Empat cara untuk melaksanakan penukaran tab dalam kemahiran javascript

Empat cara untuk melaksanakan penukaran tab dalam kemahiran javascript_javascript

WBOY

Lepaskan： 2016-05-16 15:33:37

asal

1866 orang telah melayarinya

Penukaran tab adalah sangat biasa di halaman web, jadi kami telah meringkaskan 4 kaedah pelaksanaan baru-baru ini.
Mula-mula, tulis bingkai tab dan tambahkan gaya paling mudah Kodnya adalah seperti berikut:

<!DOCTYPE html>
 <html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
 *{
 padding: 0;
 margin: 0;
 }
 li{
  list-style: none;
  float:left;
 }
 #tabCon{
  clear: both;
 }
 </style>
 </head>
 <body>
 <div id="tanContainer">
  <div id="tab">
  <ul>
   <li>标题一</li>
   <li>标题二</li>
   <li>标题三</li>
   <li>标题四</li>
  </ul>
  </div>
  <div id="tabCon">
  <div>内容一</div>
  <div>内容二</div>
  <div>内容三</div>
  <div>内容四</div>
  </div>
 </div>
 </body>
 </html>

Salin selepas log masuk

Kesan paparan semasa adalah seperti berikut:

Empat tajuk tab dan empat kawasan kandungan semuanya dipaparkan pada halaman Sekarang kita perlu mencapai kesan penukaran tab, iaitu, klik pada tajuk satu, kandungan satu akan dipaparkan, dan kandungan lain tidak akan dipaparkan; klik pada tajuk dua, kandungan dua akan dipaparkan. Kandungan lain tidak akan dipaparkan...
Jadi, idea keseluruhan adalah sangat mudah Mengikat acara kepada empat tajuk Apabila dicetuskan, kandungan yang sepadan dipaparkan dan kandungan lain disembunyikan.

Kaedah 1: Kandungan yang sepadan dengan tajuk yang diklik dipaparkan dan kandungan yang sepadan dengan tajuk yang tidak diklik disembunyikan. Kodnya adalah seperti berikut:

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
 *{
  padding: 0;
  margin: 0;
 }
 li{
  list-style: none;
 }
 </style>
 <script>
 function tab(pid){
  var tabs=["tab1","tab2","tab3","tab4"];
  for(var i=0;i<4;i++){
   if(tabs[i]==pid){
    document.getElementById(tabs[i]).style.display="block";
  }else{
    document.getElementById(tabs[i]).style.display="none";
  }
  }
 }
 </script>
</head>
 <body>
 <div id="tanContainer">
  <div id="tabNav">
  <ul>
   <li onclick="tab('tab1')">标题一</li>
   <li onclick="tab('tab2')">标题二</li>
   <li onclick="tab('tab3')">标题三</li>
   <li onclick="tab('tab4')">标题四</li>
  </ul>
  </div>
  <div id="tab">
   <div id="tab1">内容一</div>
  <div id="tab2">内容二</div>
   <div id="tab3">内容三</div>
  <div id="tab4">内容四</div>
  </div>
 </div>
 </body>
 </html>

Salin selepas log masuk

Kaedah 2: Mula-mula tetapkan semua kandungan untuk disembunyikan, kemudian klik pada tajuk untuk memaparkan kandungan yang berkaitan. Kodnya adalah seperti berikut:

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
 *{
  padding: 0;
  margin: 0;
 }
 li{
  list-style: none;
 float:left;
 }
 #tabCon{
  clear: both;
 }
 #tabCon_1{
 display: none;
 }
 #tabCon_2{
  display: none;
 }
 #tabCon_3{
 display: none;
 }
 </style>
 <script>
 function changeTab(tabCon_num){
 for(i=0;i<=3;i++) { 
  document.getElementById("tabCon_"+i).style.display="none"; //将所有的层都隐藏 
  } 
  document.getElementById("tabCon_"+tabCon_num).style.display="block";//显示当前层 
 } 
 </script>
 </head>
 <body>
 <div id="tanContainer">
  <div id="tab">
  <ul>
   <li onclick="changeTab('0')">标题一</li>
   <li onclick="changeTab('1')">标题二</li>
   <li onclick="changeTab('2')">标题三</li>
   <li onclick="changeTab('3')">标题四</li>
  </ul>
 </div>
  <div id="tabCon">
  <div id="tabCon_0">内容一</div>
  <div id="tabCon_1">内容二</div>
  <div id="tabCon_2">内容三</div>
  <div id="tabCon_3">内容四</div>
 </div>
 </div>
 </body>
 </html>

Salin selepas log masuk

Kaedah 3: Paparan dan sembunyikan dikawal dengan memiliki kelas Pertama, sembunyikan semua kandungan dan tetapkan paparan kepada tiada, dan tetapkan paparan kelas untuk menyekat semua nod tajuk dan nod kandungan . Selepas mengklik tajuk, nod tajuk dan nod kandungan yang sepadan mempunyai kelas, tetapi yang lain tidak. Kodnya adalah seperti berikut:

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
 *{
  padding: 0;
  margin: 0;
 }
 li{
  list-style: none;
  float:left;
 }
 #tabCon {
  clear: both;
 }
 #tabCon div {
  display:none;
 }
 #tabCon div.fdiv {
  display:block;
 }
 </style>
 </head>
 <body>
 <div id="tanContainer">
  <div id="tab">
  <ul>
   <li class="fli">标题一</li>
   <li>标题二</li>
   <li>标题三</li>
   <li>标题四</li>
  </ul>
  </div>
  <div id="tabCon">
  <div class="fdiv">内容一</div>
  <div>内容二</div>
  <div>内容三</div>
  <div>内容四</div>
 </div>
 </div>
 </body>
 <script>
 var tabs=document.getElementById("tab").getElementsByTagName("li");
 var divs=document.getElementById("tabCon").getElementsByTagName("div");

 for(var i=0;i<tabs.length;i++){
  tabs[i].onclick=function(){change(this);}
 }

 function change(obj){
 for(var i=0;i<tabs.length;i++){
  if(tabs[i]==obj){
  tabs[i].className="fli";
  divs[i].className="fdiv";
 }else{
  tabs[i].className="";
  divs[i].className="";
  }
  }
 } 
 </script>
 </html>

Salin selepas log masuk

Kelemahan kaedah ini ialah tiada lagi teg div di bawah div blok kandungan.

Kaedah 4: Daripada js, gunakan "input:checked" untuk menukar tab Mula-mula sembunyikan semua kandungan dan paparkan kandungan yang dipilih. Kodnya adalah seperti berikut:

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>input:checked实现tab切换</title>
 <style>
 input{
 opacity: 0;/*隐藏input的选择框*/
 }
 label{
 cursor: pointer;/*鼠标移上去变成手状*/
 float: left;
 }
 label:hover{
 background: #eee;
 }
 input:checked+label{
 color: red;
 }
 /*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/
 .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1),
 .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){
 opacity: 1;
 }
 .panel{
 opacity: 0;
 position: absolute;/*使内容区域位置一样*/
 }
 </style>
 </head>
 <body>
 <div class="tabs">
  <input checked id="one" name="tabs" type="radio">
  <label for="one">标题一</label>
 
  <input id="two" name="tabs" type="radio">
  <label for="two">标题二</label>
 
  <div class="panels">
   <div class="panel">
   <p>内容一</p>
   </div>
   <div class="panel">
   <p>内容二</p>
   </div>
  </div>
 </div>
 </body>
 </html>

Salin selepas log masuk

Kelemahan kaedah ini ialah penukaran antara kawasan yang berbeza hanya boleh dilakukan dengan mengklik.

Di atas ialah ringkasan kaedah pelaksanaan penukaran tab untuk semua orang, saya harap ia akan membantu pembelajaran semua orang. Ikuti idea ini dan mula membuat kesan penukaran tab anda sendiri.