首页 / JAVASCRIPT / js选项卡的实现方法
js选项卡的实现方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js选项卡的实现方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1479字,纯文字阅读大概需要3分钟。
内容图文
![js选项卡的实现方法](/upload/InfoBanner/zyjiaocheng/303/04778d9cb3344f888b771e6e2ac7c6fa.jpg)
一、思路
1. 获取元素;
2. for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件;
3. 点击当前按钮时会以高亮状态显示,通过for循环历遍把所有的按钮样式设置为空在把所有div的display设置为none。
4. 点击当前按钮添加样式,把当前div显示出来,display设置为block。
二、html代码:
<div id="div1"> <input type="button" class="active" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/> <input type="button" value="4"/> <div class="div2" style="display:block;">11</div> <div class="div2">22</div> <div class="div2">33</div> <div class="div2">44</div> </div>
三、css部分:
.active { background:#9CC; } .div2 { width:300px; height:200px; border:1px #666666 solid; display:none; }
四、js代码:
<script> window.onload=function(){ var odiv=document.getElementById('div1');//获取div var btn=odiv.getElementsByTagName('input');//获取div下的input var div2=odiv.getElementsByTagName('div') ;//获取div下的div for(i=0;i<btn.length;i++)//循环每个按钮 { btn[i].index=i //btn[i]是指定button的第i个按钮;为该按钮添加一个index属性,并将index的值设置为i btn[i].onclick=function()//按钮的第i个点击事件 { for(i=0;i<btn.length;i++)//循环去掉button的样式,把div隐藏 { btn[i].className='' //清空按钮的样式 div2[i].style.display='none'//隐藏div } this.className='active'//自身添加active div2[this.index].style.display='block'//this.index是当前div } } } </script>
希望本文所述对大家的javascript程序设计有所帮助。
更多js选项卡的实现方法相关文章请关注PHP中文网!
内容总结
以上是互联网集市为您收集整理的js选项卡的实现方法全部内容,希望文章能够帮你解决js选项卡的实现方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。