首页 > 代码库 > 选项卡
选项卡
思路：选项卡就是点击按钮切换到相应内容，如点击新闻1显示新闻1，点击新闻2显示新闻2。
HTML代码：
<div id="tabbox"> <input class="a" type="button" value="新闻"/> <input type="button" value="娱乐"/> <input type="button" value="游戏"/> <input type="button" value="论坛"/> <div style="display: block;">我是新闻</div> <div>我是娱乐</div> <div>我是游戏</div> <div>我是论坛</div> </div>
CSS代码：
<style> #tabbox{ width: 300px; height: 300px; margin: 100px auto; } #tabbox .a{
background: yellow;/*确定按钮的点击状态*/ } #tabbox div{ height: 100px; width: 200px; border: 1px solid #000000; display: none;
} </style>
JS代码：
1、首先获取元素Dom。
var Tab=document.getElementById(‘tabbox‘);var Btn=Tab.getElementsByTagName(‘input‘)var Box=Tab.getElementsByTagName(‘div‘);
2、for循环历遍按钮元素Btn，给Btn添加自定义属性index（这个代表按钮的索引值，就是可以以此确定按钮是第几个按钮）。
for(i=0;i<Btn.length;i++){ Btn[i].index=i; }
3、因为点击当前按钮时会以高亮状态显示，所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。
for(i=0;i<Btn.length;i++){ Btn[i].className=‘‘; Box[i].style.display=‘none‘; }
4、把当前按钮添加样式，把当前DIV显示出来，display设置为block； this.index就是点击按钮的索引，Box[this.index]就是点击按钮所对应的DIV。
this.className=‘a‘;Box[this.index].style.display=‘block‘；
注：给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换，当前按钮高度，点击和按钮高亮就是2个事件，所以要用2个for循环历遍。JS全部代码：
<script> window.onload=function(){ var Tab=document.getElementById(‘tabbox‘); var Btn=Tab.getElementsByTagName(‘input‘) var Box=Tab.getElementsByTagName(‘div‘); for(i=0;i<Btn.length;i++){ Btn[i].index=i; Btn[i].onclick=function(){ for(i=0;i<Btn.length;i++){ Btn[i].className=‘‘; Box[i].style.display=‘none‘; } this.className=‘a‘; Box[this.index].style.display=‘block‘; } } }</script>
选项卡
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。