多个table切换 getElementsByClassName
<!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的更多相关文章
- swiper (Table切换和动态加载时候出现的问题)
本文为让心灵-去旅行原创,转载请说明.. 我们在写一个简单的swiper图片轮播的时候很简单,是写死的也就那么几张图片轮播.如果这时候图片和一些东西是后台的,你从js里动态添加到DOM时,这时候你就会 ...
- delphi Table切换控件顺序问题
delphi Table切换控件顺序问题 Tagorder的值就是确定Table键切换顺序的 以上做法只能解决同一类型的多个控件(如Edit1,edit2....)显示顺序问题 假如有不同类型的控件如 ...
- vue的table切换
HTML: <div id="box"> <ul> <li v-for="(item,index) in items" v-tex ...
- selenium常用api之切换:table切换、alert弹框切换、iframe框架切换
10.查看浏览器打开了多少个table和当前页面在哪个table 测试:打开了浏览器后,打开了一个新的标签页之后,显示此时有2个table,浏览器中当前页面展示的是第2个页面,但是代码打印显示的仍然是 ...
- JavaScript 几种简单的table切换
方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> < ...
- JS几种table切换
1.使用className <!doctype html> <html lang="en"> <head> <meta charset=& ...
- element table切换分页不勾选的自带方法
场景一:没有回显勾选的情况 table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true <template> <el-table v- ...
- table切换
// 自己加载正确路径的jQ <!doctype html> <html><head><meta charset="utf-8">& ...
- table切换jquery插件 jQuery插件写法模板 流程
通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通过$.extend()来扩展jQuery $. ...
随机推荐
- 转行进入IT前端,目标全栈
选择进入IT这个行业,未来充满着挑战,未来充满着机遇,互联网已经走入高速稳定的发展正轨了,前端大时代也已经到来了.前端之路怎么走,前端需要不停地学习新知识,跟紧时代的步伐,成为全栈工程师是前端的目标. ...
- android 去掉actionbar 的虚线
if(Build.VERSION.SDK_INT>=21){ getSupportActionBar().setElevation(0); }
- 372. Super Pow
问题 Your task is to calculate ab mod 1337 where a is a positive integer and b is an extremely large p ...
- iOS 之UIButton左文右图
对于button,当添加了图片时,默认是左图右文的 '[self.pageViewsLB setImage:[UIImage imageNamed:@"read"] forStat ...
- 用C#实现 查看exe所加载dll列表的功能
var p = System.Diagnostics. Process.GetProcessesByName("w3wp").First(); List<System.Dia ...
- 我的基于asp.net mvc5 +mysql+dapper+easyui 的Web开发框架(1)数据库访问(0)
一.数据库访问 概述 1. 数据库使用mysql,orm采用dapper框架.dapper框架应用简单,只是需要自己手写sql语句,但是对于像我这样写了多年sql语句的人来说,这应该不算问题,个人还是 ...
- mysql 慢查询的小结
MySQL优化的第一步应该做的就是排查问题,找出瓶颈,而通常情况下的瓶颈和问题都需要通过观察MySQL的运行情况来进行分析,而对于大多数的程序员来说,最容易发现并解决的问题就是MySQL的慢查询或者没 ...
- 使用Fiddler关于“由于目标计算机积极拒绝,无法连接。”的解决方案
今天使用Fiddler的时候遇到下面这个问题:在地址栏想打开个一般处理程序,出现连接本机失败的提示,如下图: 而这在我没打开Fiddler的时候是显示正常的. 查看Fiddler,在嗅探 -> ...
- zTree和SweetAlert插件初探
1.zTree插件简介 zTree是一个依靠 jQuery实现的多功能“树插件”.优异的性能.灵活的配置.多种功能的组合是zTree最大优点.专门适合项目开发,尤其是树状菜单.树状数据的Web显示.权 ...
- Android-Gallery[使用C# And Java实现]
运行效果 C#实现 using Android.App; using Android.OS; using Android.Widget; namespace ImageDemo { [Activity ...