通过单击按钮覆盖 z 索引

Overriding z-index with button click

本文关键字：索引 覆盖 按钮 单击      更新时间：2023-09-26

这是我的代码：

<html>
    <head>
        <style type="text/css">
            #div1
            {
                position:absolute;
                left:0px;
                top:0px;
                z-index:-1;
                width:100px;
                height:100px;
                background-color:#F00;
            }
            #div2
            {
                position:absolute;
                left:0px;
                top:0px;
                z-index:-1;
                width:100px;
                height:100px;
                background-color:#000;
            }
            #div3
            {
                position:absolute;
                left:0px;
                top:0px;
                z-index:-1;
                width:100px;
                height:100px;
                background-color:#ccc;
            }
            #div4
            {
                position:absolute;
                left:0px;
                top:0px;
                z-index:-1;
                width:100px;
                height:100px;
                background-color:#999;
            }
            #links
            {
                position:absolute;
                left:0px;
                top:200px;
            }
        </style>
    </head>
    <body>
        <div id="div1">Div 1</div>
        <div id="div2">Div 2</div>
        <div id="div3">Div 3</div>
        <div id="div4">Div 4</div>
        <div id="links">
            <input type="button" value="Link1" onclick="resetAll(); up('div1');">
            <input type="button" value="Link2" onclick="resetAll(); up('div2');">
            <input type="button" value="Link3" onclick="resetAll(); up('div3');">
            <input type="button" value="Link4" onclick="resetAll(); up('div4');">
            <script>
                function reset(id)
                {
                    document.getElementById(id).style.zIndex = 1000;
                }
                function up(element)
                {
                    element.style.zIndex = 1;
                }
                function resetAll()
                {
                    for (var i = 1; i <= 4; i++)
                    {
                        reset('div' + i);
                    }
                }
            </script>
        </div>
    </body>
</html>

所以这行得通，当您单击Link 2按钮以显示div2时，它会覆盖div1的zindex，正如我所希望的那样。

但是，当您单击Link 1（应该显示div1）时，它不会返回到 div1 。我想要我单击的任何按钮来显示它链接到的div。

您应该将所有div重置为原始状态...然后标记您选择的。做。。将您的 HTML 升级到此版本：

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="links">
<input type="button" value="Link1" onclick="resetAll(); up('div1');">
<input type="button" value="Link2" onclick="resetAll(); up('div2');">
<input type="button" value="Link3" onclick="resetAll(); up('div3');">
<input type="button" value="Link4" onclick="resetAll(); up('div4');">
</div>

并添加此 JS 函数：

function reset(id)
{
    document.getElementById(id).style.zIndex = 1000;
}
function up(element)
{
    element.style.zIndex = 1;
}
function resetAll()
{
    for (var i = 1; i <= 4; i++)
    {
        reset('div' + i);
    }
}

小提琴来了：http://jsfiddle.net/ymzrocks/5604wmtc/

您需要将第一个设置回 0

<script>
var shown;
function show(){
    if(shown) shown.style.zIndex = 0;
    shown = this;
    shown.style.zIndex = 1;
}
</script>

然后

<input type="button" value="Link1" onclick="show()">
<input type="button" value="Link2" onclick="show()">
<input type="button" value="Link3" onclick="show()">
<input type="button" value="Link4" onclick="show()">
这是

正确的行为，因为您逐步为所有div 提供z-index=1。 Iddiv4 在z-index=1中可见，并且您执行document.getElementById('div1').style.zIndex='1'正确的行为是显示div4。您应该为div1 提供较高的 z 索引，或为其他div 提供较低的 z 索引

相关文章：