微客导航 » 文章资讯 » 基于JavaScript实现选项卡效果

基于JavaScript实现选项卡效果

2024-01-25 21:00:03 170

一个简单的选项卡的关键在于：当切换页面时，如何让所选的选项和与其对应的内容同时出现，并且在选择其他的内容时，不影响新的内容的显示。

其中用到两个很关键的思想：

1.为对象增加index属性，并通过this对index的调用来使每个选项能显示出所对应的内容，并且属性值要设置为循环时的数值-i。
2.通过对class（类）的灵活使用，来改变当先所选中目标的样式。
3、用for循环嵌套事件对每一项进行遍历。
4、在编译时，位于body中的div和input要有预先定义的行内样式或者信息。
5、button和div.style.display要同时清零，同时出现才能达到选项卡的目的。

代码：





选项卡

#div1.active{
background:red;
color:white;
}
#div1div{
width:237px;
height:150px;
background:#CCC;
display:none;
}



window.onload=function(){
varoDiv=document.getElementById('div1');
varbtn=oDiv.getElementsByTagName('input');
varaDiv=oDiv.getElementsByTagName('div');

for(vari=0;i








这是首页

这是菜单

这是帮助

这是联系

这是赞助

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

基于JavaScript实现选项卡效果

热门推荐

随机推荐