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

Four ways to implement tab switching in javascript

高洛峰Original: 2017-02-08 16:48:381099browse

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>

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>

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

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

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>

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!

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：Two examples of using javascript to implement tab switchingNext article：Two examples of using javascript to implement tab switching

See more

Four ways to implement tab switching in javascript

Related articles