javascript通过获取html标签属性class实现多选项卡的方法

前端技术 2023/09/06 JavaScript

本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=\"utf-8\" />
    <title>原生javascript通过获取html标签属性class实现多选项卡</title>
    <style type=\"text/css\">
      .tab {
        clear: both;
        margin: 20px auto;
        padding: 10px;
        width: 680px;
        overflow: hidden;
      }
      .tab .tab-menu {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .tab .tab-menu li {
        display: inline;
        margin: 0 2px 0 0;
      }      
      .tab .tab-menu li a {
        padding: 0 1em;
        text-decoration: none;
        color: #a80;
        background: #fe5;
      }
      .tab .tab-menu li a:hover {
        background: #fc0;
        color: #540;
      }
      .tab .tab-menu .active {
      }
      .tab .tab-menu .active a {
        padding-bottom: 2px;
        font-weight: bold;
        color: black;
        background: #fc0;
      }
      .tab .tab-panel {
        padding: 1em;
        border: 2px solid #fc0;
        background: #fff;
      }
      .tab .tab-panel h2 {
        font-size: 1.5em;
        color: #fc0;
      }
      .tab .tab-none {
        display: none;
      }
    </style>
    <script type=\"text/javascript\">      
      function Tab(style, scope){
        this.oItem = this.getByClass(style, scope);
        this.init();
      }
      Tab.prototype = {
        init: function(){
          var that = this, menu, m;
          for(var i = 0, len = this.oItem.length; i < len; i++){
            menu = this.oItem[i].getElementsByTagName(\'li\');
            for(var j = 0, mLen = menu.length; j < mLen; j++){
              m = menu[j];
              m.index = j;
              m.onmouseover = function(){that.focus(this);}
            }
          }
        },
        focus: function(o){
          var par = o.parentNode.parentNode, panel = par.getElementsByTagName(\'div\'), 
            btn = par.getElementsByTagName(\'li\'), len = btn.length;
          for(var i = 0; i < len; i++){
            btn[i].className = \'\';
            panel[i].className = this.changeClass(panel[i].className, \'tab-none\', true);
          }
          o.className = \'active\';
          panel[o.index].className = this.changeClass(panel[o.index].className, \'tab-none\', false);
        },
        changeClass: function(cl, cl2, add){
          var flag;
          if(cl.match(cl2) != null) flag = true;
          if(add ^ flag) return flag ? cl.replace(cl2, \'\') : cl += \' \' + cl2;
          return cl;
        },
        getByClass: function(cla, obj){
          var obj = obj || document, arr = [];
          if(document.getElementsByClassName){
            return document.getElementsByClassName(cla);
          } else {
            var all = obj.getElementsByTagName(\'*\');
            for(var i = 0, len = all.length; i < len; i++){
              if(all[i].className.match(cla) != null) arr.push(all[i]);
            }
            return arr;
          }
        }
      }
      window.onload = function(){
        new Tab(\'tab-menu\', null);
      }
    </script>
  </head>
  <body>
    <div class=\"tab\">
      <ul class=\"tab-menu\">
        <li class=\"active\"><a href=\"\">111</a></li>
        <li><a href=\"\">122</a></li>
        <li><a href=\"\">133</a></li>
      </ul>
      <div class=\"tab-panel\">
        111
      </div>
      <div class=\"tab-panel tab-none\">
        122
      </div>
      <div class=\"tab-panel tab-none\">
        133
      </div>
    </div>
    <div class=\"tab\">
      <ul class=\"tab-menu\">
        <li class=\"active\"><a href=\"\">211</a></li>
        <li><a href=\"\">222</a></li>
        <li><a href=\"\">233</a></li>
      </ul>
      <div class=\"tab-panel\">
        211
      </div>
      <div class=\"tab-panel tab-none\">
        222
      </div>
      <div class=\"tab-panel tab-none\">
        233
      </div>
    </div>
    <div class=\"tab\">
      <ul class=\"tab-menu\">
        <li class=\"active\"><a href=\"\">311</a></li>
        <li><a href=\"\">322</a></li>
        <li><a href=\"\">333</a></li>
      </ul>
      <div class=\"tab-panel\">
        311
      </div>
      <div class=\"tab-panel tab-none\">
        322
      </div>
      <div class=\"tab-panel tab-none\">
        333
      </div>
    </div>
  </body>
</html>

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

本文地址：https://www.stayed.cn/item/17353

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案