<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="" />

<meta name="copyright" content="" />

<title></title>

<style>

* {

    margin:0;

    padding:0;

    list-style:none;

    font-family: "微软雅黑", "张海山锐线体简"

}

.sub_card { width:100%}

.sub_card ul{ width:100%;float: left;}

.sub_card li {

    background:#ccc; float:left; width:110px;

}

.sub_card li.active {

    background:red;

}

.none{

    display:none;

}

.current {

    display:block;

}

</style>

<script>

window.onload=function(){

    sub_card('sub_card');

};

//解决ie8下面不兼容getElementsByClassName的方法

if (!document.getElementsByClassName) {

    document.getElementsByClassName = function (className, element) {

        var children = (element || document).getElementsByTagName('*');

        var elements = new Array();

        for (var i = 0; i < children.length; i++) {

            var child = children[i];

            var classNames = child.className.split(' ');

            for (var j = 0; j < classNames.length; j++) {

                if (classNames[j] == className) {

                    elements.push(child);

                    break;

                }

            }

        }

        return elements;

    };

}

function sub_card(sClass){

    var asub_card=document.getElementsByClassName(sClass);//抓一堆卡

    //console.log(asub_card);

    for(var i=0;i<asub_card.length;i++){

        //asub_card[i]        //每一个选项卡

        initsub_card(asub_card[i]);//给每一个选项卡加功能

    }

}

function initsub_card(osub_card){    //给单个选项卡加功能

    var aIpt=osub_card.getElementsByTagName('li');

    var aDiv=osub_card.getElementsByTagName('div');

    for(var i=0;i<aIpt.length;i++){

        aIpt[i].index=i;

        aIpt[i].onclick=function(){

            for(var i=0;i<aIpt.length;i++){

                aIpt[i].className='';

                aDiv[i].className='none';

            }

            this.className='active';

            aDiv[this.index].className='current';

        };

    }

};

</script>

</head>

<body>

<div class="sub_card">

  <ul>

    <li>11</li>

    <li>22</li>

    <li>33</li>

  </ul>

  <div class="current">aaa</div>

  <div class="none">bbbb</div>

  <div class="none">ccc</div>

</div>

<div class="sub_card">

  <ul>

    <li>11</li>

    <li>22</li>

    <li>33</li>

  </ul>

  <div class="current">aaa</div>

  <div class="none">bbbb</div>

  <div class="none">ccc</div>

</div>

</body>

</html>

多个table切换 getElementsByClassName的更多相关文章

  1. swiper （Table切换和动态加载时候出现的问题）

    本文为让心灵-去旅行原创,转载请说明.. 我们在写一个简单的swiper图片轮播的时候很简单,是写死的也就那么几张图片轮播.如果这时候图片和一些东西是后台的,你从js里动态添加到DOM时,这时候你就会 ...

  2. delphi Table切换控件顺序问题

    delphi Table切换控件顺序问题 Tagorder的值就是确定Table键切换顺序的 以上做法只能解决同一类型的多个控件(如Edit1,edit2....)显示顺序问题 假如有不同类型的控件如 ...

  3. vue的table切换

    HTML: <div id="box"> <ul> <li v-for="(item,index) in items" v-tex ...

  4. selenium常用api之切换：table切换、alert弹框切换、iframe框架切换

    10.查看浏览器打开了多少个table和当前页面在哪个table 测试:打开了浏览器后,打开了一个新的标签页之后,显示此时有2个table,浏览器中当前页面展示的是第2个页面,但是代码打印显示的仍然是 ...

  5. JavaScript 几种简单的table切换

    方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> < ...

  6. JS几种table切换

    1.使用className <!doctype html> <html lang="en"> <head> <meta charset=& ...

  7. element table切换分页不勾选的自带方法

    场景一:没有回显勾选的情况 table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true <template> <el-table v- ...

  8. table切换

    // 自己加载正确路径的jQ <!doctype html> <html><head><meta charset="utf-8">& ...

  9. table切换jquery插件 jQuery插件写法模板 流程

    通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通过$.extend()来扩展jQuery $. ...

随机推荐

  1. 关于一个parent(),siblings()的小问题

    今天发现一个小问题,现在也不知道到底是哪个梗在作祟,但是感觉是parent()和siblings()其中的一个. 我是想这样的根据输入的条件删选内容: demo: <!DOCTYPE html& ...

  2. iOS中的生命周期

    对于一个iOS app来讲,生命周期是一个十分至关重要的东西.对于一个app来讲控制着app的开启.睡眠.关闭等状态:对于一个页面的来讲,控制页面的加载.显示.消失:对于一个View或者一个普通的类来 ...

  3. Pycharm创建py文件时自定义头部模板

    File->settings->Editor->File and Code Templates->Python Script #!/usr/bin/env python # - ...

  4. Vmware无法获取快照信息 锁定文件失败

    今天早上起来发现虚拟机崩了: 造成原因: 如果使用VMWare虚拟机的时候突然系统崩溃蓝屏,有一定几率会导致无法启动, 会提示:锁定文件失败,打不开磁盘或快照所依赖的磁盘: 这是因为虚拟机在运行的时候 ...

  5. 白银5kg

    领悟: 1.其实大势涨也好,跌也好,如果我们知道价格到哪里会受阻或反弹,能出有出利润的空间,我们就可以做单.

  6. 进击的Python【第六章】：Python的高级应用（三）面向对象编程

    Python的高级应用(三)面向对象编程 本章学习要点: 面向对象编程介绍 面向对象与面向过程编程的区别 为什么要用面向对象编程思想 面向对象的相关概念 一.面向对象编程介绍 面向对象程序设计(英语: ...

  7. datatable 加序号列

    最近使用datatable时,发现没有像jqgrid那样生成序号列,在国外网站搜罗了一下还是很简单的,就要在aoColumns中添加一空列占位就行,然后再用fnRowCallback添加序号 示例如下 ...

  8. 转：学习笔记：delphi多线程学识

    学习笔记:delphi多线程知识 最近一直在温习旧的知识,刚好学习了一下Java的线程安全方面的知识,今天想起之前一直做的Delphi开发,所以还是有必要温习一下,看看这些不同的编程语言有什么不同之处 ...

  9. 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类: 学习 |字号 订阅 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE ...

  10. .NET 读取本地文件绑定到GridViewRow

    wjgl.aspx.cs: using System; using System.Collections; using System.Configuration; using System.Data; ...