javascript - 使用 zIndex 分层 div
问题描述
背景：
我正在尝试将单选按钮设置为 zIndex onclick 以将 div 置于前台。
每个关联的 div 都位于彼此之上，具有相同的 CSS ( position: absolute;)。
当单击单选按钮时，我尝试使用全局变量来保持递增并将 zIndex 应用于特定的 div id。我还尝试使用循环将所有 zIndex 设置为 1，并将传递的 div 名称设置为 2。我将在相关部分中包含两组代码。
问题：
在检查页面上的元素时，我没有看到针对递增或循环函数应用的 zIndex。
问题：
获得 zIndex 应用的任何帮助将不胜感激。列出明显的问题也将摆在桌面上，因为我仍在学习这些语言。
有问题的代码：
<script type="javascript" src="index_scripts.js">
var highest_index = 1;
function getHighestIndex() {
return ++highest_index;
}
function beg1() {
document.getElementById('beginner1').style.zIndex = getHighestIndex();
}
function adt1() {
document.getElementById('adept1').style.zIndex = getHighestIndex();
}
function int1() {
document.getElementById('intermediate1').style.zIndex = getHighestIndex();
}
function adjust_zIndex(ele_id) {
var i = 0;
var max_div = document.getElementById('test').getElementsbyTagName('div');
var z;
for (i; i < max_div; i++) {
var div_id = div_id[i];
if (ele_id === div_id) {
z = 2;
} else {
z = 1;
}
document.getElementById('div_id').style.zIndex = z;
}
}
</script>/* ##########################
Base objects
######################## */
body {
background-color: black;
}
form {
font-family: Verdana;
}
div {
position: absolute;
background-color: lightblue;
}
/* ##########################
Division IDs
######################## */
#top, #btm {
left: 1%;
right: 1%;
font-weight: bold;
border: 1px solid blue;
}
#top {
top: 1%;
bottom: 95%;
vertical-align: top;
}
#bdy,#beginner1 , #adept1, #intermediate1 {
overflow-y: scroll;
top: 6%;
height: 89%;
left: 20%;
right: 1%;
border: 1px solid blue;
}
#btm {
top: 96%;
bottom: 1%;
font-size: 9px;
vertical-align: middle;
}
#dok {
overflow-y: scroll;
top: 6%;
height: 89%;
left: 1%;
right: 81%;
font-size: 12px;
border: 1px solid blue;
}
/* ##########################
Items within divisions IDs
######################## */
/* */<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Testing Site</title>
</head>
<body>
<form>
<!--
TOP AND BOTTOM OF PAGE, DOCK AND BODY/OVERLAYS ARE RELATIVE TO THESE POSITIONS
-->
<div id="top">
<table width="100%">
<tr>
<td width="50%">Test Site</td>
<td width="50%" style="text-align: right;">Welcome to the Jungle</td>
</tr>
</table>
</div>
<div id="btm">
<p>Mock-Up</p>
</div>
<!--
DOCK ON LEFT
-->
<div id="dok">
<div style="left: 0; width:100%;">
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Beginner
</p>
<input type="radio" name="div_select" onclick="adjust_zIndex(beginner1)"/>Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Adept
</p>
<input type="radio" name="div_select" onclick="adjust_zIndex(adept1)"/>Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Intermediate
</p>
<input type="radio" name="div_select" onclick="int1()"/>Video<br/>
<hr/>
</div>
</div>
<!--
OVERLAY BODY SECTIONS, TO BE IN FOREGROUND WHEN RADIO BUTTON SELECTED FROM DOCK
-->
<div id="beginner1">
<table>
<tr>
<td style="font-weight: bold; font-size: 20px; text-align: left; width: 80%;">Beginner 1 div intended to test</td>
</tr>
</table>
<hr/>
<table width="100%">
<tr>
<td style="width: 50%;"><ul>
<li>List Item</li>
</ul></td>
<td style="width: 50%;">Second Column</td>
</tr>
<tr>
<td style="height: 1000px; vertical-align: bottom;">End</td>
</tr>
</table>
</div>
<div id="adept1">
<p id="ap"></p>
<table>
<tr>
<td>Adept 1 div intended to test </td>
</tr>
</table>
</div>
<div id="intermediate1">
<p id="ap"></p>
<table>
<tr>
<td>Intermediate 1 div intended to test </td>
</tr>
</table>
</div>
<div id="bdy" style="text-align: center;">
<p style="font-size: 12px">Please select a radio button.</p>
</div>
</form>
</body>
</html>解决方案
我更正了您的代码并在一定程度上简化了它。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Testing Site</title>
<script>
function adjust_zIndex(ele_id) {
var i = 0;
var max_div = document.getElementsByTagName('div');
console.log(max_div ,'ele_id', ele_id);
var z;
var ids = ['adept1' , 'beginner1' , 'intermediate1'];
for (i; i < max_div.length; i++) {
var div_id = max_div[i];
if (ele_id == div_id.id) {
console.log('here 2' , div_id.id);
document.getElementById(div_id.id).style.zIndex = 3;
}
}
var index = ids.indexOf(ele_id);
for(var i=0; i < ids.length;i++)
{
if(i == index)
continue;
else
document.getElementById(ids[i]).style.zIndex =1;
}
}
</script>
<style type="text/css">
/* ##########################
Base objects
######################## */
body {
background-color: black;
}
form {
font-family: Verdana;
}
div {
position: absolute;
background-color: lightblue;
}
/* ##########################
Division IDs
######################## */
#top, #btm {
left: 1%;
right: 1%;
font-weight: bold;
border: 1px solid blue;
}
#top {
top: 1%;
bottom: 95%;
vertical-align: top;
}
#bdy,#beginner1 , #adept1, #intermediate1 {
overflow-y: scroll;
top: 6%;
height: 89%;
left: 20%;
right: 1%;
border: 1px solid blue;
}
#btm {
top: 96%;
bottom: 1%;
font-size: 9px;
vertical-align: middle;
}
#dok {
overflow-y: scroll;
top: 6%;
height: 89%;
left: 1%;
right: 81%;
font-size: 12px;
border: 1px solid blue;
}
/* ##########################
Items within divisions IDs
######################## */
/* */
</style>
</head>
<body>
<form>
<!--
TOP AND BOTTOM OF PAGE, DOCK AND BODY/OVERLAYS ARE RELATIVE TO THESE POSITIONS
-->
<div id="top">
<table width="100%">
<tr>
<td width="50%">Test Site</td>
<td width="50%" style="text-align: right;">Welcome to the Jungle</td>
</tr>
</table>
</div>
<div id="btm">
<p>Mock-Up</p>
</div>
<!--
DOCK ON LEFT
-->
<div id="dok">
<div style="left: 0; width:100%;">
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Beginner
</p>
<input type="radio" name="div_select" onclick="adjust_zIndex('beginner1')"/>Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Adept
</p>
<input type="radio" name="div_select" onclick="adjust_zIndex('adept1')"/>Video<br/>
<hr/>
<p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
Intermediate
</p>
<input type="radio" name="div_select" onclick="int1()"/>Video<br/>
<hr/>
</div>
<!--
OVERLAY BODY SECTIONS, TO BE IN FOREGROUND WHEN RADIO BUTTON SELECTED FROM DOCK
-->
<div id="beginner1">
<table>
<tr>
<td style="font-weight: bold; font-size: 20px; text-align: left; width: 80%;">Beginner 1 div intended to test</td>
</tr>
</table>
<hr/>
<table width="100%">
<tr>
<td style="width: 50%;"><ul>
<li>List Item</li>
</ul></td>
<td style="width: 50%;">Second Column</td>
</tr>
<tr>
<td style="height: 1000px; vertical-align: bottom;">End</td>
</tr>
</table>
</div>
<div id="adept1">
<p id="ap"></p>
<table>
<tr>
<td>Adept 1 div intended to test </td>
</tr>
</table>
</div>
<div id="intermediate1">
<p id="ap"></p>
<table>
<tr>
<td>Intermediate 1 div intended to test </td>
</tr>
</table>
</div>
<div id="bdy" style="text-align: center;">
<p style="font-size: 12px">Please select a radio button.</p>
</div>
</form>
</body>
推荐阅读
- python - 为什么每次尝试替换文件中的文本时程序都会崩溃？
- angular - 对 observable subscribe 参数进行类型检查
- c++ - 类中的同步变量，它们是父类和子类
- splunk - 使用 splunk 进行 API 监控
- typescript - 当我尝试用黄瓜运行量角器测试时，出现以下错误消息“E/launcher - Process exited with error code 1”
- gnu-make - 在 iseries 上使用 makefile 时遇到问题
- c# - Counter不是单实例，调用next时需要指定实例名
- c# - C# 变量在赋值后没有改变，改变显示在 UI 中
- android - 如何将图像从服务器（api）存储到房间数据库
- guidewire - Guidewire 索赔中心 6/8 版和 10 版之间的区别