个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
背景:
我试图让一个单选按钮设置 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>
关于javascript - 使用 zIndex 分层 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58064997/
25
4
0
我有一个奇怪的情况，zIndex: 5 的按钮位于 Interactable.View 之上zIndex:19。 编辑:它只出现在顶部。它是可见的。但不是(因为缺少更好的术语)可点击。 下面是代码。我
我在对话框中遇到了一个有关 jQueryUI 自动完成的有趣问题。 我的对话框 HTML 如下所示: Title
我试图将 plotBand 放置在轴刻度下方，但其标签位于它们上方。 由于标签继承了 band 的 zIndex 并且无法指定此属性，是否有一种方法不需要我在绘制图表后更改 zIndex？ 查看示例
在下面，我尝试通过单击按钮将绿色圆圈置于前面。我怎样才能实现这个目标？ Click me var ma
我在使用 javascript 更改 z-index 时遇到问题，任何人都可以帮助我解决我出错的地方， 我想要做的是在单击按钮后让一个框出现在另一个框的顶部，但它似乎不起作用。 function to
我想将对话框类中的几个元素的 z-index 设置为 1。 目前我正在使用以下代码: document.getElementsByClassName("dialog")[0].style.zIndex
http://jsfiddle.net/cxwQF/12/ . 注意:红框和绿框应该相交。绿框是图片或视频。悬停时它变成黄色。但不在红色框开始的底部。红框是控件(例如，下一张图片)。 问题。如何将父
我对 CSS 比较陌生，但已经取得了很大进步。不过，我对此不知所措，而且在搜索时似乎找不到答案。我的小网站在 Chrome 上按预期工作，但在 IE 中却不行。我有一个 div，我在其中将 zInde
我有一个带有图标的边栏菜单。菜单文本应仅在图标悬停时显示。但是，由于元素之前的 Zindex 问题，这并不完美。如下图所示，将鼠标悬停在红色区域不应显示侧边栏菜单，但确实如此。 显示问题的图像 ->>
我有一个我一直在尝试开发的网站，该网站的一部分是开发一个滑出菜单，当鼠标悬停时该菜单会水平滑出。我首先将菜单默认设置为完全扩展，这样更容易实时开发。 为了视觉引用，我正在尝试实现这样的目标: |---
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Jquery Draggable + Bring to Front 我有一个网站，用户可以在其中打开多个聊天
我有一堆 div 位于图像之上。我试图让 div 隐藏的分数出现在鼠标悬停上。为此，我尝试将 div 的 zIndex 设置为低于图像的 zIndex，以便显示出来。但我似乎可以选择所有的 div。
我正在尝试通过 Jquery 设置 z-Index，但我需要除名为 importantdiv 的一个之外的每个 DIV 都在 0-100 之间。唯一的问题是 importantdiv 的 z-inde
我有一个菜单和一个幻灯片，菜单的 zindex 大于幻灯片的 zindex，但由于某种原因它被幻灯片覆盖了。我查看了 zindex 上的文档，但找不到发生这种情况的任何原因。 您可以访问此处的站点:h
我有一个蓝色标题，我想在另一个 View 中使用动画事件参与其中。但在我执行动画功能之前，我手动设置了 zIndexes 并且知道它根本不起作用!意味着当我为组件的 zIndex 属性赋予 1 或 1
如何将任何控件设置到屏幕的最顶部。例如我在数据模板或层次结构数据模板中有一个文本 block ……现在我想在鼠标悬停时将此文本 block 设置为最上面。在 IsMouseOver 触发器中将 Gri
我使用 jquery-ui-1.8.18.custom.min.js 作为 jquery 对话框。 以下是打开代码: $('#userDetLink').click(function (e)
这个问题在这里已经有了答案: WPF - How can I place a usercontrol over an AdornedElementPlaceholder? (2 个答案) 关闭 2
作为一个有趣的办公项目，我们正在构建一个很酷的过渡背景 Winform 的应用程序来替换标准的 Windows 桌面背景。 挑战之一是我们需要将 WinForm 窗口置于桌面背景和图标之上，而不是任务
我正在将我的 Android 应用升级到 Marshmallow 23 以及最新的 GoogleMaps V2。我这样做的一个原因是因为最新的 map 允许一个 .zIndex 参数，它允许我们设置我
我是一名优秀的程序员,十分优秀！