html - 如何自定义排列位置绝对div标签

Question

这里我试图在点击相应的元素时显示 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>

Answer 1

希望对您有所帮助。如果您不想隐藏 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>