使用jQuery更改重叠图像z索引_Jquery_Html_Css_Z Index

使用jQuery更改重叠图像z索引

jquery html css

使用jQuery更改重叠图像z索引,jquery,html,css,z-index,Jquery,Html,Css,Z Index,我有三个矩形图像重叠在一条对角线内，第一个在左上角完全可见，第二个在中心部分被第一个隐藏，最后一个在右下角部分被第二个隐藏。我想要的图像，这是点击去在其他的顶部。我试图通过使用jQuery操作z-index来实现这一点，但它似乎不起作用。实际上，jQuery似乎还没有被识别出来这是我的测试代码： <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-

我有三个矩形图像重叠在一条对角线内，第一个在左上角完全可见，第二个在中心部分被第一个隐藏，最后一个在右下角部分被第二个隐藏。我想要的图像，这是点击去在其他的顶部。我试图通过使用jQuery操作z-index来实现这一点，但它似乎不起作用。实际上，jQuery似乎还没有被识别出来

这是我的测试代码：

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
    $(document).ready(function () {
        $('#launch').click(function () {
            alert('Ok');
        });

        $('.bottom-pic').click(function () {
            $(this).css('z-index' : '1');
            $('.bottom-pic').not(this).css('z-index' : '0');
        });
    });
    </script>
    <style type="text/css">
    #pictures {
        width: 650px;
        height: 300px;

        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        margin-bottom: 50px;

        position: relative;
    }

    #top {
        top: 0;
        left: 0;

        position: absolute; 
        z-index: 1;
    }

    #center {
        top: 60px; 
        left: 200px;

        position: absolute; 
        z-index: 1;
    }

    #bottom {
        top: 150px; 
        left: 400px; 

        position: absolute; 
        z-index: 0;
    }
    </style>
    </head>
    <body>
    <div id="pictures">
         <img src="bottom-pic.jpg" id="top" class="bottom-pic">
         <img src="bottom-pic.jpg" id="center" class="bottom-pic">
         <img src="bottom-pic.jpg" id="bottom" class="bottom-pic">
    </div>
    <input type="button" value="Try" id="launch">
</body>
</html>


$（文档）.ready（函数（）{
$（“#启动”）。单击（函数（）{
警报（“正常”）；
});
$（'.bottompic'）。单击（函数（）{
$（this.css（'z-index'：'1'）；
$（'.bottompic'）。不是（this.css（'z-index'：'0'）；
});
});
#照片{
宽度：650px；
高度：300px；
左边距：自动；
右边距：自动；
边缘顶部：20px；
边缘底部：50px；
位置：相对位置；
}
#顶{
排名：0；
左：0；
位置：绝对位置；
z指数：1；
}
#居中{
顶部：60px；
左：200px；
位置：绝对位置；
z指数：1；
}
#底部{
顶部：150px；
左：400px；
位置：绝对位置；
z指数：0；
}

但当我点击“启动”按钮时，什么都没有发生。

好吧，我刚刚意识到你犯了一个小错误，你在加载查询和声明内联javascript时使用了相同的标记。。。你不能那样做。您必须使用两个单独的脚本标记

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
    </script>

请注意新的脚本标记：

  <script type="text/javascript">
    $(document).ready(function () {
        $('#launch').click(function () {
            alert('Ok');
        });

        $('.bottom-pic').click(function () {
            $(this).css('z-index', '1');
            $('.bottom-pic').not(this).css('z-index', '0');
        });
    });
   </script>


$（文档）.ready（函数（）{
$（“#启动”）。单击（函数（）{
警报（“正常”）；
});
$（'.bottompic'）。单击（函数（）{
$（this.css（'z-index'，'1'）；
$（'.bottompic'）。不是（this.css（'z-index'，'0'）；
});
});

答案的其余部分仍然适用。。也就是说，您必须去掉顶部、中间和底部的z索引……

我建议您从css中删除所有z索引。然后创建一个名为“.veryHighZ Index”的类，例如，将该类添加到单击的图像中并从以前单击的图像中删除该类

我稍微修改了你的代码，但是这里的代码应该可以用

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
$(document).ready(function () {


        // #pictures div catches all divs inside the #pictures
    $('#pictures div').click(function () {
            $('.veryhighz-index').removeClass('veryhighz-index');
            $(this).addClass('veryhighz-index');
    });
});
</script>
<style type="text/css">
#pictures {
    width: 650px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 50px;
        background: lime;
    position: relative;
        overflow: hidden;
}

#top {
    top: 0;
    left: 0;
    position: absolute; 
}

#center {
    top: 60px; 
    left: 200px;
    position: absolute; 
}

#bottom {
    top: 150px; 
    left: 400px; 
    position: absolute; 
}

    .top, .center, .bottom {
    width: 300px;
    height: 300px;
    border: 2px solid red;
    }
    .top {background: red;}
    .center {background: yellow;}
    .bottom {background: blue;}


    .veryhighz-index {
        z-index: 999999;
    }



</style>
</head>
<body>


    <div id="pictures">
        <div id="top" class="top"></div>
        <div id="center" class="center"></div>
        <div id="bottom" class="bottom"></div>
    </div>

</body>
</html>

并将此代码转换为javascript函数

   // #pictures img catches all images inside the #pictures
    $('#pictures img').click(function () {
        $('.veryhighz-index').removeClass('veryhighz-index');
        $(this).addClass('veryhighz-index');
    });

您有一个javascript语法错误。在css命令中，将：替换为，

此外，您需要将自定义脚本包装在自己的javascript标记中，而不是在jqueryimport标记中，按如下方式更改脚本：

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
          $('#launch').click(function () {
              alert('Ok');
          });

          $('.bottom-pic').click(function () {
              $(this).css('z-index' , '1');
              $('.bottom-pic').not(this).css('z-index' , '0');
          });
        });
    </script>


$（文档）.ready（函数（）{
$（“#启动”）。单击（函数（）{
警报（“正常”）；
});
$（'.bottompic'）。单击（函数（）{
$（this.css（'z-index'，'1'）；
$（'.bottompic'）。不是（this.css（'z-index'，'0'）；
});
});

这应该行。

这里有一些建议

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
$(document).ready(function () {


        // #pictures div catches all divs inside the #pictures
    $('#pictures div').click(function () {
            $('.veryhighz-index').removeClass('veryhighz-index');
            $(this).addClass('veryhighz-index');
    });
});
</script>
<style type="text/css">
#pictures {
    width: 650px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 50px;
        background: lime;
    position: relative;
        overflow: hidden;
}

#top {
    top: 0;
    left: 0;
    position: absolute; 
}

#center {
    top: 60px; 
    left: 200px;
    position: absolute; 
}

#bottom {
    top: 150px; 
    left: 400px; 
    position: absolute; 
}

    .top, .center, .bottom {
    width: 300px;
    height: 300px;
    border: 2px solid red;
    }
    .top {background: red;}
    .center {background: yellow;}
    .bottom {background: blue;}


    .veryhighz-index {
        z-index: 999999;
    }



</style>
</head>
<body>


    <div id="pictures">
        <div id="top" class="top"></div>
        <div id="center" class="center"></div>
        <div id="bottom" class="bottom"></div>
    </div>

</body>
</html>

正如Ahmed所指出的，您的脚本位于一个脚本标记内，该标记具有单独的src和url值-也为您的内联脚本创建一个单独的src和url值。你很高兴你做对了吗

尝试将按钮输入放在打开和关闭表单标记之间，或者至少放在一些块级元素（如div或p）之间。很明显，有些scrict Doctype在其他方面不接受它

当链接到文件名中有多个点的js文件（如1.7.1.min.js）时，我遇到了一些脚本无法工作的问题-我链接到谷歌托管的代码，该代码的目录路径中有这些点，如…/1.7.1/jquery.js

显然，我需要解决如何包含代码示例-单击“{}”按钮或添加4个空格似乎不起作用

仍然无法识别jQuery。哦，加载jQuery本身有问题吗？是的。正如我所说，单击#启动按钮没有任何效果。我按照你说的做了，但是jQuery仍然没有被识别。我放了一个警报（“jQuery已加载”）；在DOM就绪事件处理程序内部，但没有显示任何内容。老实说，这真的很奇怪。Grr我犯了与您在.css部分相同的语法错误。。。它是.css（'z-index'，'0'），而不是：。。。已修复：）请重试