Four ways to implement tab switching in javascript-JS Tutorial-php.cn

Four ways to implement tab switching in javascript

高洛峰

Release： 2017-02-08 16:48:38

Original

1182 people have browsed it

This article mainly introduces four ways to implement tab switching in JavaScript, and evaluates each method. Interested friends can refer to it

Tab switching is very common in web pages. Therefore, 4 implementation methods have been summarized recently.
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>
 <p id="tanContainer">
  <p id="tab">
  <ul>
   <li>标题一</li>
   <li>标题二</li>
   <li>标题三</li>
   <li>标题四</li>
  </ul>
  </p>
  <p id="tabCon">
  <p>内容一</p>
  <p>内容二</p>
  <p>内容三</p>
  <p>内容四</p>
  </p>
 </p>
 </body>
 </html>

Copy after login

The current display effect is as follows:

Four ways to implement tab switching in javascript

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 title one, content one will be displayed, and other content will be displayed. Not displayed; click title two, content two is displayed, and other content is not displayed...
Then, the overall idea is very simple, bind events to four titles, and 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>
 <p id="tanContainer">
  <p id="tabNav">
  <ul>
   <li onclick="tab(&#39;tab1&#39;)">标题一</li>
   <li onclick="tab(&#39;tab2&#39;)">标题二</li>
   <li onclick="tab(&#39;tab3&#39;)">标题三</li>
   <li onclick="tab(&#39;tab4&#39;)">标题四</li>
  </ul>
  </p>
  <p id="tab">
   <p id="tab1">内容一</p>
  <p id="tab2">内容二</p>
   <p id="tab3">内容三</p>
  <p id="tab4">内容四</p>
  </p>
 </p>
 </body>
 </html>

Copy after login

##Method 2: First set all content to be hidden, then click on the title pair The content used is displayed. 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>
 <p id="tanContainer">
  <p id="tab">
  <ul>
   <li onclick="changeTab(&#39;0&#39;)">标题一</li>
   <li onclick="changeTab(&#39;1&#39;)">标题二</li>
   <li onclick="changeTab(&#39;2&#39;)">标题三</li>
   <li onclick="changeTab(&#39;3&#39;)">标题四</li>
  </ul>
 </p>
  <p id="tabCon">
  <p id="tabCon_0">内容一</p>
  <p id="tabCon_1">内容二</p>
  <p id="tabCon_2">内容三</p>
  <p id="tabCon_3">内容四</p>
 </p>
 </p>
 </body>
 </html>

Copy after login

##Method 3: Show and hide through class control. First, set the hidden display of all content 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 the class, and 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 p {
  display:none;
 }
 #tabCon p.fp {
  display:block;
 }
 </style>
 </head>
 <body>
 <p id="tanContainer">
  <p id="tab">
  <ul>
   <li class="fli">标题一</li>
   <li>标题二</li>
   <li>标题三</li>
   <li>标题四</li>
  </ul>
  </p>
  <p id="tabCon">
  <p class="fp">内容一</p>
  <p>内容二</p>
  <p>内容三</p>
  <p>内容四</p>
 </p>
 </p>
 </body>
 <script>
 var tabs=document.getElementById("tab").getElementsByTagName("li");
 var ps=document.getElementById("tabCon").getElementsByTagName("p");

 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";
  ps[i].className="fp";
 }else{
  tabs[i].className="";
  ps[i].className="";
  }
  }
 } 
 </script>
 </html>

Copy after login

The disadvantage of this method is that there can no longer be a p tag under the p 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>
 <p 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>
 
  <p class="panels">
   <p class="panel">
   <p>内容一</p>
   </p>
   <p class="panel">
   <p>内容二</p>
   </p>
  </p>
 </p>
 </body>
 </html>

Copy after login

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

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

For more related articles on the four methods of tab switching using javascript, please pay attention to the PHP Chinese website!