网站链接: element-ui dtcms
当前位置: 首页 > 技术博文  > 技术博文

选项卡

2021/5/2 2:54:53 人评论

操作基础 1、怎么确定当前点的按钮是哪个? 用到this。简单下个定义当前发生事件的元素。 this.className active; 2、如何找到当前的div并让其显示出来? 原理:只要确定当前按钮是第几个的,然后用这个编号将该div显示出来 遇…

操作基础

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>

 

相关资讯

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?