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 相关文章推荐
window.js 主要包含了页面的一些操作
Dec 23 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
详解AngularJS controller调用factory
May 19 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 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新手入门学习方法
2011/05/08 PHP
php实现telnet功能示例
2014/04/08 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
js里的prototype使用示例
2010/11/19 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python如何快速拼接字符串
2020/10/28 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
SQL SERVER面试资料
2013/03/30 面试题
linux下进程间通信的方式
2014/12/23 面试题
见习期自我鉴定
2013/11/07 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
党员转正介绍人意见
2015/06/03 职场文书
高中体育课教学反思
2016/02/16 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
TensorFlow的自动求导原理分析
2021/05/26 Python
postgresql中如何执行sql文件
2023/05/08 PostgreSQL