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

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

html

点击1

点击2

点击3

点击4

点击5

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

// 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显示隐藏？...相关推荐

2021-11-18 WinFrom面试题 Winform中，怎么实现Form2中点击打开按钮，打开Form1,输入文本，再点击Form1中的“确定”按钮，把输入的值显示到Form2的文本框中？
Winform中,怎么实现Form2中点击打开按钮,打开Form1,输入文本,再点击Form1中的"确定"按钮,把输入的值显示到Form2的文本框中? 首先自定义一个事件参数Tex ...
html中模块怎么创建,在Joomla中创建一个自定义HTML模块，不显示
我有几个Joomla!我感到有信心的网站.我的Joomla!网站有一个artisteer模板. 我最近做了一个"戳出"的图片,突出了纸张的边缘,并展示了一个android" ...
用记事本怎么在html页面中加入个按钮,,页面提示5次你干啥点我,用word制作网页...
1.即时取消 Word 的后台打印当我们刚刚编辑完一篇文档按了打印命令后,后来又不想打印当前的文档了,那么怎样才能即时取消后台打印任务呢?一般来说,大家在发出打印任务后,程序会自动将打印任务设置为后 ...
html页面显示用户在线统计,在HTML页面中实现点击数统计
在文章发布系统中采用服务器端生成静态页面的方法可以有效减轻服务器的负担,特别是对大流量网站非常有效.但是既然生成的是静态页面,生成时是什么样,显示就是什么样了,对于文章常见文章被阅读次数怎么显示呢? ...
java错误页面显示错误信息_Struts2在JSP页面中显示错误信息和提示信息的方法
Struts2在JSP页面中显示错误信息和提示信息的方法主要有以下四种. 注意:以下四种方法均需要使Action类继承ActionSupport类. 一.域级错误信息 ①重写Action中的valid ...
给页面字段中添加一个按钮，点击按钮实现弹窗效果
页面效果: 点击按钮后弹窗效果: 点击左上角搜索框效果: 页面实现代码首先配置一个入住房间字段 <field><header>入住房间</header><d ...
java中怎么写一个返回按钮_java – 在表中实现一个按钮,该按钮使用Thymeleaf和Spring Boot从表中返回数据...
使用Spring Boot和Thymeleaf的tl; dr,当用户单击特定行的第5列中的按钮时,如何在表单中返回表的第1列值? 嗨,您好!长时间听众,第一次来电.对于这个问题,我非常感谢你的帮助. ...
java在表格单元中加入button按钮_java – 在表中实现一个按钮,该按钮使用Th...
使用Spring Boot和Thymeleaf的tl; dr,当用户单击特定行的第5列中的按钮时,如何在表单中返回表的第1列值? 嗨,您好!长时间听众,第一次来电.对于这个问题,我非常感谢你的帮助. ...
java 按钮组_java中创建一个按钮组,有10个按钮，分别写着0，1,2,，3。。。。9
展开全部用Java创建按钮组32313133353236313431303231363533e59b9ee7ad9431333332643966的程序如下:import java.awt.GridL ...

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

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

最新文章

热门文章