這個可以通過給按鈕點擊事件傳參來完成，下面是一個小例子

html

點擊1

1

點擊2

2

點擊3

3

點擊4

4

點擊5

5

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

// 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的刪除和增加，只要是成對的，那就都可以了。

總結

以上是生活随笔為你收集整理的HTML如何在按钮右侧显示div,如何实现点击页面中的一个按钮相应位置的div显示隐藏？...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。