100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > HTML如何在按钮右侧显示div 如何实现点击页面中的一个按钮相应位置的div显示隐藏?...

HTML如何在按钮右侧显示div 如何实现点击页面中的一个按钮相应位置的div显示隐藏?...

时间:2023-03-08 07:26:43

相关推荐

HTML如何在按钮右侧显示div 如何实现点击页面中的一个按钮相应位置的div显示隐藏?...

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

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的删除和增加,只要是成对的,那就都可以了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。