如何实现点击页面中的一个按钮相应位置的div显示隐藏？_Html5_论坛

如何实现点击页面中的一个按钮相应位置的div显示隐藏？

一***句分类：Html5 人气：5836 回帖：2 发布于6年前收藏

页面中有多个按钮，分别对应页面中的多个div，点击其中一个按钮，相应div隐藏显示。

如果对每个按钮和div设置id的话可以做到，但是有点太傻了，应该有简单方法的，例如用this？或者其他方法？

希望找到通过原生js解决的方法，jq几乎还没学呢···

我想实现附图中的功能，附图中只有一个按钮和div，我想要多个按钮div都可以做到那个样子的。
我只给需要实现这个功能的div设置了class，没有单独设置id，希望有能不设置id就可以实现的方法···

谢谢了···

补充：第一个答案可以简单实现，但是有一些问题，例如删除第一个div后，后面的显示隐藏会出现问题，如下面图片的那样。

标签：html html5 javascript

讨论这个帖子（2）垃圾回帖将一律封号处理……

Lv6 码匠

15***57 UI设计师 6年前#1

这个可以通过给按钮点击事件传参来完成，下面是一个小例子
html

<div id="wrap">
    <button>点击1</button>
    <div class="one">1</div>
    <button>点击2</button>
    <div class="one">2</div>
    <button>点击3</button>
    <div class="one">3</div>
    <button>点击4</button>
    <div class="one">4</div>
    <button>点击5</button>
    <div class="one">5</div>
</div>

css

.one{
    width: 100px;
    height: 20px;
    background-color: red;
}

var wrap = document.getElementById('wrap');
  console.log(wrap);
  var oButton = wrap.getElementsByTagName('button');
  var num = oButton.length;
  for(let i=0; i<num; i++){
    // oButton[i].setAttribute('onclick' ,`change(${i},this)`);
    oButton[i].addEventListener('click',function(){
      var oDiv = document.getElementsByClassName('one')
      if (oDiv[i].style.opacity == 1 || (oDiv[i].style.opacity == '')) {
        oDiv[i].style.opacity = 0;
      } else {
        oDiv[i].style.opacity = 1;
      }
    })
  }

--------------------补充：---------------
js中用opacity是为了不让隐藏的div破坏页面结构，如果用display的话，容易影响页面的结构。当然这视情况而定。
if语句判断是否为''是因为在一开始，opacity=''，如果不加，一开始要点击两次，div才会隐藏。
--------------------补充：---------------
修改了一下js和html。每次对div和button的删除和增加，只要是成对的，那就都可以了。

Lv3 码奴

顺***风职业无 6年前#2

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取