Home > Article > Web Front-end > Four ways to implement tab switching in javascript_javascript skills

Four ways to implement tab switching in javascript_javascript skills

WBOYOriginal: 2016-05-16 15:33:371790browse

Tab switching is very common in web pages, so we have recently summarized 4 implementation methods.
First, write the tab frame and add the simplest style. The code is as follows:

<!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>

The current display effect is as follows:

The four tab titles and four content areas are all displayed on the page. Now we need to achieve the tab switching effect, that is, click on title one, content one will be displayed, and other content will not be displayed; click on title two, content two will be displayed. Other content will not be displayed...
So, the overall idea is very simple. Bind events to four titles. When triggered, the corresponding content is displayed and other content is hidden.

Method 1: The content corresponding to the clicked title is displayed, and the content corresponding to the non-clicked title is hidden. The code is as follows:

 <!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>

Method 2: First set all content to be hidden, then click on the title to display the relevant content. The code is as follows:

 <!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>

Method 3: Display and hide are controlled by owning the class. First, hide all content and set display to none, and set the display of the class to block. Traverse all title nodes and content nodes. After clicking the title, the title node and the corresponding content node have classes, but the others do not. The code is as follows:

 <!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>

The disadvantage of this method is that there can no longer be a div tag under the div of the content block.

Method 4: Instead of js, use "input:checked" to switch tabs. First hide all content and display the selected content. The code is as follows:

 <!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>

The disadvantage of this method is that switching between different areas can only be done by clicking.

The above is a summary of the tab switching implementation method for everyone. I hope it will be helpful to everyone's learning. Follow this idea and start making your own tab switching effects.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：N more simple seamless scrolling codes implemented by JS (including graphic and text effects)_javascript skillsNext article：N more simple seamless scrolling codes implemented by JS (including graphic and text effects)_javascript skills

See more

Four ways to implement tab switching in javascript_javascript skills

Related articles