Question

这是我的代码：

<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时，它会覆盖zindex的{{1}}就好了，就像我想的那样。

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

Answer 1

您应该将所有您的div重置为原始状态...然后标记您选择的。 do..upgrade你的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/

Answer 2

你需要将第一个设置回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()">

Answer 3

这是正确的行为，因为您一步一步地向所有div提供z-index=1。 Id div4与z-index=1可见，您执行document.getElementById('div1').style.zIndex='1'正确的行为是显示div4。您应该为div1提供更高的z-index，或者为其他div提供更低的z-index

单击按钮覆盖z-index

3 个答案: