html - 如何自定义排列位置绝对 div 标签
问题描述
在这里,我试图div#content_1 , div#content_2 and 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>
推荐阅读
- r - 如何使用 Rugarch 保留原始日期
- javascript - 多文件夹命令处理程序
- while-loop - 如何创建一个一直持续到 5 个变量都等于 10 的 while 循环
- python - 在自动安装 Pylance 之前,我有一个运行良好的 python django 应用程序。现在我收到一个错误:发生异常:
- python - 如何将数据从 ESP8266 发送到 Django 本地服务器
- python - tensorflow 错误:未能找到可以处理输入的数据适配器:
, ( 包含类型的值 - git - GIT 本地和远程工作流
- python - 如何将列表中的数字更改为另一个数字
- html - Angular 10 错误 NG8002 无法绑定对象
- django - 循环输入字段名称