JS实现的tab页切换效果完整示例

2019-11-19 12:20:05

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现的tab页切换效果。分享给大家供大家参考，具体如下：

效果图如下：

完整实例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>www.VeVB.COm JS实现的TAB切换</title>    <style type="text/css">      #content {        width: 400px;        height: 200px;      }      #tab_bar {        width: 400px;        height: 20px;        float: left;      }      #tab_bar ul {        padding: 0px;        margin: 0px;        height: 20px;        text-align: center;      }      #tab_bar li {        list-style-type: none;        float: left;        width: 133.3px;        height: 20px;        background-color: gray;      }      .tab_css {        width: 400px;        height: 200px;        background-color: orange;        display: none;        float: left;      }    </style>    <script type="text/javascript">      var myclick = function(v) {        var llis = document.getElementsByTagName("li");        for(var i = 0; i < llis.length; i++) {          var lli = llis[i];          if(lli == document.getElementById("tab" + v)) {            lli.style.backgroundColor = "orange";          } else {            lli.style.backgroundColor = "gray";          }        }        var divs = document.getElementsByClassName("tab_css");        for(var i = 0; i < divs.length; i++) {          var divv = divs[i];          if(divv == document.getElementById("tab" + v + "_content")) {            divv.style.display = "block";          } else {            divv.style.display = "none";          }        }      }    </script>  </head>  <body>    <div id="content">      <div id="tab_bar">        <ul>          <li id="tab1" onclick="myclick(1)" style="background-color: orange">            tab1          </li>          <li id="tab2" onclick="myclick(2)">            tab2          </li>          <li id="tab3" onclick="myclick(3)">            tab3          </li>        </ul>      </div>      <div class="tab_css" id="tab1_content" style="display: block">        <div>页面一</div>      </div>      <div class="tab_css" id="tab2_content">        <div>页面二</div>      </div>      <div class="tab_css" id="tab3_content">        <div>页面三</div>      </div>    </div>  </body></html>

感兴趣的朋友可以使用本站在线HTML/CSS/JavaScript代码运行工具：http://tools.VeVB.COm/code/HtmlJsRun，测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：JS监听滚动和id自动定位滚动

下一篇：CryptoJS中AES实现前后端通用加解密技术