在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 如何實現(xiàn)點擊頁面中的一個按鈕相應(yīng)位置的div顯示隱藏?

如何實現(xiàn)點擊頁面中的一個按鈕相應(yīng)位置的div顯示隱藏?

頁面中有多個按鈕,分別對應(yīng)頁面中的多個div,點擊其中一個按鈕,相應(yīng)div隱藏顯示。

如果對每個按鈕和div設(shè)置id的話可以做到,但是有點太傻了 ,應(yīng)該有簡單方法的,例如用this?或者其他方法?

希望找到通過原生js解決的方法,jq幾乎還沒學(xué)呢···

我想實現(xiàn)附圖中的功能,附圖中只有一個按鈕和div,我想要多個按鈕div都可以做到那個樣子的。
我只給需要實現(xiàn)這個功能的div設(shè)置了class,沒有單獨設(shè)置id,希望有能不設(shè)置id就可以實現(xiàn)的方法···
圖片描述

謝謝了···

補(bǔ)充:第一個答案可以簡單實現(xiàn),但是有一些問題,例如刪除第一個div后,后面的顯示隱藏會出現(xiàn)問題,如下面圖片的那樣。圖片描述

回答
編輯回答
萌面人

這個可以通過給按鈕點擊事件傳參來完成,下面是一個小例子
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;
}

js

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;
      }
    })
  }

--------------------補(bǔ)充:---------------
js中用opacity是為了不讓隱藏的div破壞頁面結(jié)構(gòu),如果用display的話,容易影響頁面的結(jié)構(gòu)。當(dāng)然這視情況而定。
if語句判斷是否為''是因為在一開始,opacity='',如果不加,一開始要點擊兩次,div才會隱藏。
--------------------補(bǔ)充:---------------
修改了一下js和html。每次對div和button的刪除和增加,只要是成對的,那就都可以了。

2018年4月1日 09:16