首页 > 代码库 > js原生实现选项卡功能
js原生实现选项卡功能
结构:
<div id="box"> <input type="button" value="http://www.mamicode.com/书籍" class="on"> <input type="button" value="http://www.mamicode.com/图片"> <input type="button" value="http://www.mamicode.com/专栏"> <div style="display:block;">书籍</div> <div>图片</div> <div>专栏</div> </div>
样式:
#box div{ width:200px; height:200px; background:#ccc; display:none; } .on{ color:#fff; background:green; }
选项卡的思路是当我们点击当前的按钮的时候,先清空所有的样式,再给当前的按钮和盒子添加样式。
<script> //获取元素 var oBox = document.getElementById("box"); var aBtn = oBox.getElementsByTagName("input"); var aDiv = oBox.getElementsByTagName("div"); //aBtn是一组元素,所以需要用到for循环 for(var i=0;i<aBtn.length;i++){ aBtn[i].index=i; aBtn[i].onclick=function(){ for(var k=0;k<aBtn.length;k++){//先清空所有的样式 aBtn[k].className =‘‘; aDiv[k].style.display =‘none‘; } //给当前的按钮和div添加样式 this.className =‘on‘; aDiv[this.index].style.display =‘block‘; }; } </script>
相关知识点:
index 属性可返回下拉列表中选项的索引位置
语法:optionObject.index
className 属性设置或返回元素的 class 属性。
object.className=classname
js原生实现选项卡功能
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。