主页 / 网络编程 /

基于JavaScript实现选项卡效果

网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了基于JavaScript实现选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

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>

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

上一篇：基于JavaScript实现无缝滚动效果 下一篇：基于JavaScript实现弹幕特效

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by