html点击按钮隐藏div6,javascript – 隐藏上一个div并点击一个按钮切换下一个div？...

大家好,我想做的是我的html中有多个按钮.每个按钮指的是特定的DIV.我想要的是一个简单的方法来隐藏以前打开的DIV时单击另一个按钮.到目前为止,我已经在JQUERY中编写了代码.但我有一种奇怪的感觉,就是将大量代码放入一个简单可行的任务中.有没有比我试图完成的更简单的方法？

这是我到目前为止所做的

TODO supply a title

我的CSS

#body{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: #000;

}

.buttons{

width: 10%;

height: 5%;

position: relative;

left: 10%;

cursor: pointer;

z-index: 500;

}

.divs{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

display: none;

}

#div1{

background-color: #377D9F;

}

#div2{

background-color: #02B0E6;

}

#div3{

background-color: #4b9500;

}

#div4{

background-color: #aaa;

}

#div5{

background-color:#aa0000;

}

#div6{

background-color: aquamarine;

}

我的Jquery

$(document).ready(function () {

$("#button1").click(function () {

$('#div1').toggle(100);

$("#div2,#div3,#div4,#div5,#div6").hide();

});

$("#button2").click(function () {

$("#div2").toggle(100);

$("#div1,#div3,#div4,#div5,#div6").hide();

});

$("#button3").click(function () {

$("#div3").toggle(100);

$("#div1,#div2,#div4,#div5,#div6").hide();

});

$("#button4").click(function () {

$("#div4").toggle(100);

$("#div1,#div2,#div3,#div5,#div6").hide();

});

$("#button5").click(function () {

$("#div5").toggle(100);

$("#div1,#div2,#div3,#div4,#div6").hide();

});

$("#button6").click(function () {

$("#div6").toggle(100);

$("#div1,#div2,#div3,#div4,#div5").hide();

});

});

我的html中有大约50个DIV,就像上面的那样.我认为使用上面的JQUERY浪费了编码线.我知道会有更好的方法来做到这一点.我的代码似乎运行良好,但是无论用户点击哪个按钮,JQUERY中都有任何方法可以隐藏以前的DIV.

JQUERY的新手可以帮助任何人.谢谢你提前….

解决方法:

按照这句话,我的html中有大约50个DIV,如上所述

如果您使用选择标记,而不是使用按钮来显示和隐藏每个div,这将更加干净和方便

HTML

Select to show a div

Show 1

Show 1

This is the first div

This is the second div

jQuery的

$('#show_divs').change(function() { //onChange execute the function

var showDiv = $(this).val(); //Store the value in the variable

$('div.parent > div').hide(); //Hide all the div nested inside .parent

$('#show' + showDiv ).show(); //Fetch the value of option tag, concatenate it with the id and show the relevant div

});

CSS

div.parent > div {

display: none; /* Hide initially */

}

如果你想避免使用id,你也可以创建你的自定义属性,比如data-show =“1”和data-show =“2”等……

标签：jquery,javascript,css,html

来源： https://codeday.me/bug/20190624/1280766.html