这里我试图在点击相应的元素时显示 div#content_1 、 div#content_2 和 div#content_3
。我想在顶部显示最后点击的元素。如果你点击这里item3 一次,那么您将永远无法查看 item1 和 item2,如果您单击 item2 一次,您将永远看不到 item1。请帮助我解决此问题,在此先感谢。(考虑到我们有大量的元素)
function getElement(e) {
var elem = document.getElementById(e);
return elem;
}
getElement("item_1").addEventListener("click",function(){
getElement("content_1").style.display = "block";});
getElement("item_2").addEventListener("click",function(){
getElement("content_2").style.display = "block";});
getElement("item_3").addEventListener("click",function(){
getElement("content_3").style.display = "block";});
ul,li{
padding:0px;
margin:0px;
list-style:none;
}
div#menu{
width:100%;
height:50px;
}
div#menu>ul li{
float:left;
border:1px solid #000;
padding: 2px;
background-color:blue;
color:#fff;
margin:5px;
cursor:pointer;
}
#content{
width:100%;
border:1px solid #000;
height:200px;
position :relative;
}
.abs{
position:absolute;
width:100px;
height:100px;
border:1px solid #000;
display:none;
}
#content_1{
background-color:red;
}
#content_2{
background-color:green;
}
#content_3{
background-color:yellow;
}
<div id=menu>
<ul>
<li id="item_1">menu item1</li>
<li id="item_2">menu item2</li>
<li id="item_3">menu item3</li>
</ul>
</div>
<div id="content">
<div id="content_1" class="abs"></div>
<div id="content_2" class="abs"></div>
<div id="content_3" class="abs"></div>
</div>
最佳答案
希望对您有所帮助。如果您不想隐藏 div,那么只需使用 z-index 即可。
function getElement(e) {
var elem = document.getElementById(e);
return elem;
}
function zIndexZero() {
document.querySelectorAll('.abs').forEach(function(item) {
item.style.zIndex = 0;
});
}
getElement("item_1").addEventListener("click",function(){
zIndexZero();
getElement("content_1").style.display = "block";
getElement("content_1").style.zIndex = 99;
});
getElement("item_2").addEventListener("click",function(){
zIndexZero();
getElement("content_2").style.display = "block";
getElement("content_2").style.zIndex = 99;
});
getElement("item_3").addEventListener("click",function(){
zIndexZero();
getElement("content_3").style.display = "block";
getElement("content_3").style.zIndex = 99;
});
ul,li{
padding:0px;
margin:0px;
list-style:none;
}
div#menu{
width:100%;
height:50px;
}
div#menu>ul li{
float:left;
border:1px solid #000;
padding: 2px;
background-color:blue;
color:#fff;
margin:5px;
cursor:pointer;
}
#content{
width:100%;
border:1px solid #000;
height:200px;
position :relative;
}
.abs{
position:absolute;
width:100px;
height:100px;
border:1px solid #000;
display:none;
}
#content_1{
background-color:red;
}
#content_2{
background-color:green;
}
#content_3{
background-color:yellow;
}
<div id=menu>
<ul>
<li id="item_1">menu item1</li>
<li id="item_2">menu item2</li>
<li id="item_3">menu item3</li>
</ul>
</div>
<div id="content">
<div id="content_1" class="abs"></div>
<div id="content_2" class="abs"></div>
<div id="content_3" class="abs"></div>
</div>
关于html - 如何自定义排列位置绝对div标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50405927/