选项卡

最新推荐文章于 2022-04-27 11:07:32 发布

梁什么鸭，

最新推荐文章于 2022-04-27 11:07:32 发布

阅读量224

点赞数 1

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Lm_choose_live/article/details/116338095

版权

Javascript 专栏收录该内容

74 篇文章 2 订阅

订阅专栏

操作基础

1、怎么确定当前点的按钮是哪个？
用到this。简单下个定义当前发生事件的元素。

this.className = 'active';

2、如何找到当前的div并让其显示出来？
原理：只要确定当前按钮是第几个的，然后用这个编号将该div显示出来

遇到问题

1、在点击按钮时，可能还有其他按钮是处于高亮状态（即点击状态），此时需要让所有按钮包括自身都处于为未点击状态，还需将所有选项卡内容块隐藏

for (let i=0; i<oInput.length; i++) {
            oInput[i].className = '';
            oDiv1[i].style.display = 'none';
          }

2、给每个input添加一个index属性

<input type="button" value="选项2" index="1">

此时在FireFox、chrome、以及IE7以上的浏览器上会抛出错误，原因是因为index不是一个标准的HTML属性，是我们自己创造出来的，在这些标准浏览器下会把index过滤掉，用不了。
那么可以不往HTML中添加index，而通过JS加进去，没有出问题的原因等学到面向对象时就会懂。

for (let i=0; i<oInput.length; i++) {

        oInput[i].index = i;
}

完整代码

<style>
    #div1 div {
      width: 160px;
      height: 100px;
      background: pink;
      display: none;
    }
    #div1 .active {
      background: pink;
    }
  </style>

  <script>
    window.onload = function () {
      const oDiv = document.getElementById('div1');
      const oInput = oDiv.getElementsByTagName('input');
      const oDiv1 = oDiv.getElementsByTagName('div');

      for (let i=0; i<oInput.length; i++) {

        oInput[i].index = i;

        oInput[i].onclick = function () {

          for (let i=0; i<oInput.length; i++) {
            oInput[i].className = '';
            oDiv1[i].style.display = 'none';
          }
          this.className = 'active';
          oDiv1[this.index].style.display = 'block';
        }
      }
    };
  </script>

<body>
<div id="div1">
  <input class="active" type="button" value="选项1">
  <input type="button" value="选项2">
  <input type="button" value="选项3">
  <div style="display: block">111</div>
  <div>222</div>
  <div>333</div>
</div>
</body>

该操作的一个延伸或者说是另一种实现方法，参考下一篇简易日历