Home > Web Front-end > JS Tutorial > How to implement multiple tabs in javascript by obtaining the html tag attribute class_javascript skills

How to implement multiple tabs in javascript by obtaining the html tag attribute class_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-05-16 15:48:57
Original
1404 people have browsed it

The example in this article describes how javascript implements multiple tabs by obtaining the html tag attribute class. Share it with everyone for your reference. The specific implementation method is as follows:

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

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.

Related labels:
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Issues
What are JavaScript hook functions?
From 1970-01-01 08:00:00
0
0
0
What is JavaScript garbage collection?
From 1970-01-01 08:00:00
0
0
0
c++ calls javascript
From 1970-01-01 08:00:00
0
0
0
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template