Tab切换效果实现-CSDN博客

本文链接：https://blog.csdn.net/quhongqiang/article/details/79623177

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8"/>
    <title>tab切换</title>
    <style type="text/css">
      ul,li,div{padding:0;margin:0}ul li{float:left;width:100px;height:30px;line-height:30px;text-align:center;background-color:#fff;border:1px #bbb solid;border-bottom:0}ul li.fli{background-color:#ccc;color:red}ul{overflow:hidden;zoom:1;list-style-type:none}#tab_con{width:304px;height:200px}#tab_con div{width:304px;height:200px;display:none;border:1px #bbb solid;border-top:0}#tab_con div.fdiv{display:block;background-color:#ccc}
    </style>
  </head>
  <body>
    <ul id="tab">
      <li class="fli">tab1</li>
      <li>tab2</li>
      <li>tab3</li>
    </ul>
    <div id="tab_con">
      <div class="fdiv">a啊啊啊啊啊啊啊啊啊啊啊啊</div>
      <div>bbbb</div>
      <div>cccc</div>
    </div>
    <script type="text/javascript">
      var tabs = document.getElementById("tab").getElementsByTagName("li");
      var divs = document.getElementById("tab_con").getElementsByTagName("div");
      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";
            divs[i].className = "fdiv";
          } else {
            tabs[i].className = "";
            divs[i].className = "";
          }
        }
      }
    </script>

超级简单的tab切换