JavaScript实现的简单Tab点击切换功能示例

2019-11-19 13:32:22

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JavaScript实现的简单Tab点击切换功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html><head>  <title>www.VeVB.COm tab点击切换</title>  <style type="text/css">  *{    padding: 0;    margin: 0;  }  #example{    width: 500px;    height: 400px;    margin: 0 auto;  }  #example .hd ul li{    display: inline-block;    width: 32%;    height: 36px;    line-height: 36px;    border-radius: 5px;    background-color: #333;    text-align: center;    color: #fff;  }  #example .hd ul li.current{    background-color: green;  }  #example .bd{    border: 1px solid #ccc;    border-radius: 5px;  }  #example .bd ul li{    display: none;  }  #example .bd ul li.current{    display: block;  }  </style></head><body>  <div id="example">    <div class="hd">      <ul>        <li class="current">Beijing</li>        <li>Shanghai</li>        <li>Guangzhou</li>      </ul>    </div>    <div class="bd">      <ul>        <li class="current">This is Beijing!</li>        <li>This is Shanghai</li>        <li>This is Guangzhou</li>      </ul>    </div>  </div>  <script type="text/javascript">  var hd = document.getElementsByClassName("hd")[0].getElementsByTagName("li");  var bd = document.getElementsByClassName("bd")[0].getElementsByTagName("li");  for (var i = 0; i < hd.length; i++) {    hd[i].onclick = function(){      doTabs(this);    }  }  function doTabs(obj){    for (var i = 0; i < hd.length; i++) {      if(hd[i]==obj){        hd[i].className = "current";        bd[i].className = "current";      }else{        hd[i].className = "";        bd[i].className = "";      }    }  }  </script></body></html>

使用本站HTML/CSS/JS在线运行测试工具：http://tools.VeVB.COm/code/HtmlJsRun，可得到如下测试运行效果：