如何自定义排列位置绝对 div 标签答案

【问题标题】：How to customisly arrange Position absolute div tags如何自定义排列位置绝对 div 标签
【发布时间】：2018-05-18 16:48:26
【问题描述】：

在这里，我试图在单击相应项目时显示div#content_1 , div#content_2 and div#content_3。我想在顶部显示最后点击的项目。在这里，如果您单击 item3 一次，那么您将无法永久查看 item1 和 item2，如果一旦您永远看不到 item1，请单击 item2。请帮我解决这个问题，在此先感谢。（考虑到我们没有大量项目）

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>

【问题讨论】：

不，兄弟...如果您在我们无法查看 item1,item2 时单击第 3 个
np...我正在编辑问题...
你能用jquery还是只用js？我问是因为你没有在问题中标记他们中的任何一个
@MihaiT 他们俩都会做的兄弟
使用 jQuery，我可以制定一个解决方案，您不必为每个项目都创建点击事件。一种适用于所有人的方法

标签： html css position absolute

【解决方案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>

【讨论】：

【解决方案2】：

只需获取其他元素并将它们隐藏在您的 js 代码中即可：

function getElement(e) {
   var elem = document.getElementById(e);
   return elem;
}

getElement("item_1").addEventListener("click",function(){
    getElement("content_1").style.display = "block";
    getElement("content_2").style.display = "none";
    getElement("content_3").style.display = "none";    
    });
    
getElement("item_2").addEventListener("click",function(){
    getElement("content_1").style.display = "none";
    getElement("content_2").style.display = "block";
    getElement("content_3").style.display = "none";   
    });
    
getElement("item_3").addEventListener("click",function(){
    getElement("content_1").style.display = "none";
    getElement("content_2").style.display = "none";
    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>

希望这是您正在寻找的。p>

【讨论】：

对不起兄弟，由于 2 个原因，这是不可能的。1）。实际上，即使您关闭了一个 div，您也需要看到底部的一个，2）。考虑到没有大量此代码将变大的项目（指数）。
@DreamHunter 这个答案解决了所提出的问题。如果您的真正问题大不相同，为什么不问真正的问题呢？
@MrLister 我不这么认为，兄弟我已经添加了我的问题上没有大量项目大家都了解情况，考虑有 10 个项目并计算使用此代码时的行数

【解决方案3】：

这就是你想要的

function getElement(e) {
   var elem = document.getElementById(e);
   return elem;
}

$("[id^=item_]").on('click', function () {
        $("[id^=content_]").css("display", "block");
        var id = $(this).prop('id');
        var dataArray = id.split('_');
        var numToCLick = parseInt(dataArray[1]);

        for(var i = 1; i < numToCLick; i++){
          getElement("content_"+i).style.display = "none";
        }
});

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;
  float:left;
  display: none;
  
 }
 
 #content_1{
  background-color:red;
 }
 #content_2{
  background-color:green;
 }
 #content_3{
  background-color:yellow;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<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 是大于您单击的哪个是可见的，而不是隐藏，如果想做其他事情，您可以展开代码
这也是动态的，不需要为每个项目添加 addEventListener 可能在动态站点中你不知道列表中有多少项目

【解决方案4】：

这只是jq版本。您可以根据li项目的id选择abs

let item = $("ul li"),
  content = $(".abs")

item.on("click", function() {
  let itemId = $(this).attr("id"),
    idNr = itemId.split('_').pop();
    
  content.removeClass("show")
  $("#content_" + idNr).addClass("show")

})

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;
}

.abs.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【讨论】：