zoukankan      html  css  js  c++  java
  • 论tab切换的几种实现方法

      tab切换在网页中很常见,故最近总结了4种实现方法。

      首先,写出tab的框架,加上最简单的样式,代码如下:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <style>
     6   *{
     7     padding: 0;
     8     margin: 0;
     9   }
    10   li{
    11     list-style: none;
    12     float:left;
    13   }
    14   #tabCon{
    15     clear: both;
    16   }
    17 </style>
    18 </head>
    19 <body>
    20   <div id="tanContainer">
    21     <div id="tab">
    22       <ul>
    23         <li>标题一</li>
    24         <li>标题二</li>
    25         <li>标题三</li>
    26         <li>标题四</li>
    27       </ul>
    28     </div>
    29     <div id="tabCon">
    30       <div>内容一</div>
    31       <div>内容二</div>
    32       <div>内容三</div>
    33       <div>内容四</div>
    34     </div>
    35   </div>
    36 </body>
    37 </html>
    View Code

      现在的显示效果如下图:

      四个tab标题和四个内容区都显示在了页面中,现在要实现tab切换效果,即点击标题一,内容一显示出来,其他内容不显示;点击标题二,内容二显示出来,其他内容不显示……

      那么,整体思路很简单,给四个标题绑定事件,触发的时候对应的内容显示,其他的内容隐藏。

      方法一:点击标题对应的内容显示,非点击标题对应的内容隐藏。代码如下:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <style>
     6   *{
     7       padding: 0;
     8       margin: 0;
     9   }
    10   li{
    11       list-style: none;
    12   }
    13 </style>
    14 <script>
    15   function tab(pid){
    16       var tabs=["tab1","tab2","tab3","tab4"];
    17       for(var i=0;i<4;i++){
    18         if(tabs[i]==pid){
    19             document.getElementById(tabs[i]).style.display="block";
    20         }else{
    21             document.getElementById(tabs[i]).style.display="none";
    22         }
    23       }
    24   }
    25 </script>
    26 </head>
    27 <body>
    28   <div id="tanContainer">
    29       <div id="tabNav">
    30       <ul>
    31           <li onclick="tab('tab1')">标题一</li>
    32           <li onclick="tab('tab2')">标题二</li>
    33           <li onclick="tab('tab3')">标题三</li>
    34           <li onclick="tab('tab4')">标题四</li>
    35       </ul>
    36       </div>
    37       <div id="tab">
    38         <div id="tab1">内容一</div>
    39         <div id="tab2">内容二</div>
    40         <div id="tab3">内容三</div>
    41         <div id="tab4">内容四</div>
    42       </div>
    43   </div>
    44 </body>
    45 </html>
    View Code

      方法二:先设置所有内容隐藏,然后点击标题对应的内容显示。代码如下:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <style>
     6   *{
     7     padding: 0;
     8     margin: 0;
     9   }
    10   li{
    11     list-style: none;
    12     float:left;
    13   }
    14   #tabCon{
    15     clear: both;
    16   }
    17   #tabCon_1{
    18     display: none;
    19   }
    20   #tabCon_2{
    21     display: none;
    22   }
    23   #tabCon_3{
    24     display: none;
    25   }
    26 </style>
    27 <script>
    28   function changeTab(tabCon_num){
    29     for(i=0;i<=3;i++) { 
    30       document.getElementById("tabCon_"+i).style.display="none"; //将所有的层都隐藏 
    31     } 
    32       document.getElementById("tabCon_"+tabCon_num).style.display="block";//显示当前层 
    33   } 
    34 </script>
    35 </head>
    36 <body>
    37   <div id="tanContainer">
    38     <div id="tab">
    39       <ul>
    40         <li onclick="changeTab('0')">标题一</li>
    41         <li onclick="changeTab('1')">标题二</li>
    42         <li onclick="changeTab('2')">标题三</li>
    43         <li onclick="changeTab('3')">标题四</li>
    44       </ul>
    45     </div>
    46     <div id="tabCon">
    47       <div id="tabCon_0">内容一</div>
    48       <div id="tabCon_1">内容二</div>
    49       <div id="tabCon_2">内容三</div>
    50       <div id="tabCon_3">内容四</div>
    51     </div>
    52   </div>
    53 </body>
    54 </html>
    View Code

      方法三:显示和隐藏通过是有拥有class控制,先把所有的内容隐藏dispaly设为none,而该class的display设置为block,遍历所有标题节点和内容节点,点击标题后,该标题节点和对用的内容节点拥有class,其他的没有。代码如下:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <style>
     6   *{
     7     padding: 0;
     8     margin: 0;
     9   }
    10   li{
    11     list-style: none;
    12     float:left;
    13   }
    14   #tabCon {
    15     clear: both;
    16   }
    17   #tabCon div {
    18     display:none;
    19   }
    20   #tabCon div.fdiv {
    21     display:block;
    22   }
    23 </style>
    24 </head>
    25 <body>
    26   <div id="tanContainer">
    27     <div id="tab">
    28       <ul>
    29         <li class="fli">标题一</li>
    30         <li>标题二</li>
    31         <li>标题三</li>
    32         <li>标题四</li>
    33       </ul>
    34     </div>
    35     <div id="tabCon">
    36       <div class="fdiv">内容一</div>
    37       <div>内容二</div>
    38       <div>内容三</div>
    39       <div>内容四</div>
    40     </div>
    41   </div>
    42 </body>
    43 <script>
    44   var tabs=document.getElementById("tab").getElementsByTagName("li");
    45   var divs=document.getElementById("tabCon").getElementsByTagName("div");
    46 
    47   for(var i=0;i<tabs.length;i++){
    48     tabs[i].onclick=function(){change(this);}
    49   }
    50 
    51   function change(obj){
    52   for(var i=0;i<tabs.length;i++){
    53     if(tabs[i]==obj){
    54     tabs[i].className="fli";
    55     divs[i].className="fdiv";
    56   }else{
    57     tabs[i].className="";
    58     divs[i].className="";
    59     }
    60     }
    61   } 
    62 </script>
    63 </html>
    View Code

      该方法的缺点是,内容块的div下面不能再有div标签了。

      方法四:不用js,用“input:checked”来做tab切换,先把所有的内容隐藏,被选中的内容显示。代码如下:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>input:checked实现tab切换</title>
     6 <style>
     7 input{
     8   opacity: 0;/*隐藏input的选择框*/
     9 }
    10 label{
    11   cursor: pointer;/*鼠标移上去变成手状*/
    12   float: left;
    13 }
    14 label:hover{
    15   background: #eee;
    16 }
    17 input:checked+label{
    18   color: red;
    19 }
    20 /*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/
    21 .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1),
    22 .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){
    23   opacity: 1;
    24 }
    25 .panel{
    26   opacity: 0;
    27   position: absolute;/*使内容区域位置一样*/
    28 }
    29 </style>
    30 </head>
    31 <body>
    32   <div class="tabs">
    33       <input checked id="one" name="tabs" type="radio">
    34       <label for="one">标题一</label>
    35 
    36       <input id="two" name="tabs" type="radio">
    37       <label for="two">标题二</label>
    38 
    39       <div class="panels">
    40         <div class="panel">
    41           <p>内容一</p>
    42         </div>
    43         <div class="panel">
    44           <p>内容二</p>
    45         </div>
    46       </div>
    47   </div>
    48 </body>
    49 </html>
    View Code

      改方法的缺点是,不同区域切换只能通过点击。

  • 相关阅读:
    CF1202F You Are Given Some Letters...
    CF1178E Archaeology
    PTA (Advanced Level) 1005 Spell It Right
    PTA (Advanced Level) 1004 Counting Leaves
    Qt5——从零开始的Hello World教程(Qt Creator)
    PTA (Advanced Level) 1003 Emergency
    PTA (Advanced Level) 1002 A+B for Polynomials
    HDU 1272 小希的迷宫
    FZU 2150 Fire Game
    HihoCoder
  • 原文地址:https://www.cnblogs.com/lovelyun/p/4885465.html
Copyright © 2011-2022 走看看