原生js实现选项卡功能
更新时间：2017年03月08日 09:37:33 作者：xiongpeiji
本文主要介绍了原生js实现选项卡功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生js选项卡写法</title>
<style>
#div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;}
.active{background: red;}
</style>
<script>
window.onload=function(){//原生js选项卡写法
var oDiv = document.getElementById('div1');
var aInput = document.getElementsByTagName('input');
var aCon = oDiv.getElementsByTagName('div');
for(var i=0;i<aInput.length;i++){
aInput[i].index = i;
aInput[i].onclick = function(){
for(var i=0;i<aInput.length;i++){
aInput[i].className = '';
aCon[i].style.display = 'none';
}
this.className= 'active';
aCon[this.index].style.display = 'block';
}
}
}
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="1" />
<input type="button" value="2"/>
<input type="button" value="3"/>
<div style="display: block;">11111111111</div>
<div>22222222222</div>
<div>333333333333</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
本节为大家介绍下JavaScript DOM节点添加，将node里面的str放到h1段落中使之成为h1的新段落2014-07-07
利用微信强大的社交能力通过小程序达到裂变的目的，拉取新用户。下面小编给大家带来了微信小程序生成海报分享朋友圈的实现方法，感兴趣的朋友跟随小编一起看看吧2019-05-05
下面小编就为大家带来一篇Javascript获取随机数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
动态样式类封装JS代码，动态的改变样式。2009-09-09
Javascript中call，apply，bind方法的详解与总结
本文主要Javascript中call，apply，bind方法的进行全面分析，并在文章结尾对call，apply，bind方法的联系和区别做了总结，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
uniapp 对于scroll-view滑动和页面滑动的联动处理方法
这篇文章主要介绍了uniapp 对于scroll-view滑动和页面滑动的联动处理方法,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-08-08
jqueryjQueryJQUERYJqueryJQueryjquery报错jsJSJsmyeclipseMyEclipseMyeclipse，很多朋友应该都会遇到过这个情况吧，按照下面的步骤便可迎刃而解2013-10-10
setTimeout方法是js中的延时方法，很多js的bug，只需要使用该方法延时一下，就会自动解决了，简直就是万能药方，也是我比较喜欢使用的最后手段。2006-12-12
这篇文章主要介绍了如何基于javascript实现贪吃蛇游戏,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
无感刷新机制的目的是在用户不知情的情况下,自动更新其认证令牌本文,主要介绍了js实现无感刷新的实践(附前后端实现),具有一定的参考价值,感兴趣的可以了解一下2024-04-04
最新评论