HTMLタグの属性class_javascriptスキルを取得してJavaScriptで複数のタブを実装する方法-jsチュートリアル-php.cn

HTMLタグの属性class_javascriptスキルを取得してJavaScriptで複数のタブを実装する方法

WBOY

リリース： 2016-05-16 15:48:57

オリジナル

1351 人が閲覧しました

この記事の例では、JavaScript が HTML タグの属性クラスを取得して複数のタブを実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

<!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 &#63; 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 プログラミング設計に役立つことを願っています。