超级简单的tab切换

怼烎@ 2022-05-29 07:54 142阅读 0赞

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