tab切换 原生js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0; padding:0;}
.out-box{overflow:hidden;}
ul{overflow:hidden;}
ul li{list-style: none; float:left; margin-right:10px;}
.con{width:300px;height:150px; line-height:150px; display: none; background:red; position: absolute; top:30px; left:0;}
.con1{background:red;}
.con2{background:blue;}
.con3{background:yellow;} </style>
</head>
<body> <div class="out-box" id="box">
<ul id="ul">
<li><button>按钮1</button></li>
<li><button>按钮2</button></li>
<li><button>按钮3</button></li>
</ul>
<div class="con con1">1111111111</div>
<div class="con con2">1111111111</div>
<div class="con con3">1111111111</div> </div> <script>
/*方法一*/
var aUl=document.getElementById("ul");
var aLi=aUl.getElementsByTagName("li");
var aDiv=document.getElementsByClassName("con");
console.log(aDiv);
for(var i=0; i<aLi.length; i++){
aLi[i].index=i; //把i值存起来
aLi[i].onclick= function () {
for(var j=0; j<aDiv.length; j++){
aDiv[j].style.display="none"; //清除div样式
}
aDiv[this.index].style.display="block"; //给当前的div盒子赋样式 }
} /*方法二*/
var aUl=document.getElementById("ul");
var aLi=aUl.getElementsByTagName("li");
var aDiv=document.getElementsByClassName("con");
for(var i=0; i<aLi.length; i++){
(function(i){ //自执行函数会直接把i值保存起来
aLi[i].onclick= function () {
for(var j=0; j<aDiv.length; j++){
aDiv[j].style.display="none"; //清除div样式
}
aDiv[i].style.display="block"; //给当前的div盒子赋样式
}
})(i); } </script> </body>
</html>
tab切换 原生js的更多相关文章
- 可重复使用Tab切换代码和纯js代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Tab选项卡切换卡JS效果
<script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid ...
- 几个不同的tab切换示例
上一篇<论tab切换的几种实现方法>中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例. 一.仿”中国人民大学“官网的tab切换,背景是图片,效果图如下 ...
- 标签页(tab)切换的原生js,jquery和bootstrap实现
概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...
- 原生js实现tab切换
//通过原生js实现table切换<html><head><meta http-equiv="Content-Type" content=" ...
- 原生JS实现tab切换--web前端开发
tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...
- 几种tab切换尝试 原生js
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 原生js实现随着滚动条滚动,导航会自动切换的效果
最近学习前端,把前面用原生js写的一段有关tab切换效果的代码贴上,实现的效果比较简陋,请大家见谅 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
随机推荐
- Java编程思想--控制执行流程
java控制流程设计的关键字包括if-else,while,do-while,for,return,break,continue以及switch.(go-to) 1.while在迭代之前计算一次布尔表 ...
- [Err] 1093 - You can't specify target table 'master_data' for update in FROM clause
delete from master_data where category_id not in (select category_id from master_data a, bc_category ...
- react-redux-action
Action 是把数据从应用(view等)传到 store 的有效载荷,store.dispatch() 将 action 传到 store. //尽量减少在 action 中传递的数据//actio ...
- [图形学]VS2017中OpenGL的下载及安装中的异常
1.放dll文件:C:\Windows\SysWOW64 或C:\Windows\windows32 2.lib和h:C:\Program Files (x86)\Microsoft Visual S ...
- numpy数组及处理:效率对比
def Sum(n): #定义一个函数(注意:格式对齐,否则会出错) a=list(range(n)) b=list(range(0,50000*n,5)) c=[] for i in range(l ...
- Visual Studio+VAssistX自动添加注释,函数头注释,文件头注释
转载:http://blog.csdn.net/xzytl60937234/article/details/70455777 在VAssistX中为C++提供了比较规范注释模板,用这个注释模板为编写的 ...
- SecureCRT标签显示标题
- SQL-50 将employees表中的所有员工的last_name和first_name通过(')连接起来
题目描述 将employees表中的所有员工的last_name和first_name通过(')连接起来.CREATE TABLE `employees` (`emp_no` int(11) NOT ...
- JAVAEE 第八周
equals():反映的是对象或变量具体的值,即两个对象里面包含的值--可能是对象的引用,也可能是值类型的值. hashCode():计算出对象实例的哈希码,并返回哈希码,又称为散列函数.根类Obje ...
- ConcurrentHashMap实现原理
ConcurrentHashMap是Java并发包中提供的一个线程安全且高效的HashMap实现(若对HashMap的实现原理还不甚了解,可参考我的另一篇文章HashMap实现原理及源码分析),Con ...