基于JavaScript实现选项卡效果

2019-11-19 16:01:45

字体：大中小

来源：转载

供稿：网友

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

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

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

代码：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>选项卡</title>  <style type="text/css">     #div1 .active{      background: red;      color: white;    }    #div1 div{      width: 237px;      height:150px;      background:#CCC;      display: none;    }  </style>  <script type="text/javascript">    window.onload=function(){      var oDiv = document.getElementById('div1');      var btn = oDiv.getElementsByTagName('input');      var aDiv = oDiv.getElementsByTagName('div');      for (var i = 0; i < btn.length; i++) {        btn[i].index=i;        //给btn增加一个index的属性        btn[i].onmouseover = function(){          for (var i = 0; i < btn.length; i++) {            btn[i].className = '';            aDiv[i].style.display = 'none';          }          this.className = 'active';          aDiv[this.index].style.display = 'block';          //调用index属性        }      }    };  </script></head><body>  <div id="div1">    <input type="button" value="首页" class="active">    <input 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>这是赞助</div>  </div></body></html>

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

上一篇：基于JavaScript实现无缝滚动效果

下一篇：基于JavaScript实现弹幕特效