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


Posted in Javascript onJuly 27, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
readonly和disabled属性的区别
Jul 26 #Javascript
javascript实现继承的简单实例
Jul 26 #Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 #Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 #Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 #Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 #Javascript
javascript中setTimeout使用指南
Jul 26 #Javascript
You might like
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
Python中%r和%s的详解及区别
2017/03/16 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python如何删除文件中重复的字段
2019/07/16 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
舞蹈比赛获奖感言
2014/02/04 职场文书
企业宣传方案
2014/03/04 职场文书
食品业务员岗位职责
2014/03/18 职场文书
清明节演讲稿
2014/05/27 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
python简单验证码识别的实现过程
2021/06/20 Python