<!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. SQL(横表和纵表)行列转换,PIVOT与UNPIVOT的区别和使用方法举例,合并列的例子

    使用过SQL Server 2000的人都知道,要想实现行列转换,必须综合利用聚合函数和动态SQL,具体实现起来需要一定的技巧,而在SQL Server 2005中,使用新引进的关键字PIVOT/UN ...

  2. swift中 if let 与 guard let 对比,guard会降低一个分支

    //用if let与guard let实现同一效果,会发现guard降低一个分支 //可以用if var guard var 表示定义的变量能修改值 func test(){ let name:Str ...

  3. mybatis 配置连接池

    <!-- 配置数据源 --> <bean id="dataSource" class="com.alibaba.druid.pool.DruidData ...

  4. SVN安装及使用

    1.SVN的安装 1.1 安装软件 以下图1中两个图标,分别是SVN服务器端和客户端安装软件 图1 1.2 服务器安装步骤 先点击图1第一个图标,安装SVN的服务器,默认安装即可,安装成功的界面如下图 ...

  5. MySQL的一些知识。

    新MySQL而言:对于myisam引擎的表select默认是会锁定该表(共享锁)的 ,会导致其他操作挂起,处于等待状态.对于innodb引擎的表select默认是不会锁表(也不会锁行,简而言之就是不加 ...

  6. java模拟浏览器上传文件

    public static void main(String[] args) { String str = uploadFile("C:/Users/RGKY/Desktop/wKgBHVb ...

  7. Eclipse下配置javaweb项目快速部署到tomcat

    用惯了VS,再用Eclipse,完全有一种从自动挡到手动挡的感觉啊. 很多同学在Eclipse下开发web项目,每一次修改代码,看效果的时候都有右键项目->Run as -> Run on ...

  8. ExtJs基础知识总结:Dom、IFrame和TreePanel、TabPanel(三)

    概述 ExtJs是另外一种操作封装JavaScript的类库与Jquery同类.所以对Dom的操作也是支持的,比如修改Div内Html内容等操作.有几个问题需要思考下: 1.ExtJs也支持IFram ...

  9. Myeclipse下的struts2.3.8 配置 保证绝对好用

    转自:http://blog.csdn.net/oxuannishi/article/details/8538386 1.建立web project工程,我的结构如下: 2.这一步非常重要:引入必要的 ...

  10. 将一个实体数据保存到不同的数据表中<EntityFramework6.0>

    2014-11-22声明方式 public class Product { [Key] [DatabaseGenerated(DatabaseGeneratedOption.None)] public ...