Javascript 将现有div放置在现有div上，然后在它们之间切换_Javascript_Jquery_Html_Css

Javascript 将现有div放置在现有div上，然后在它们之间切换

javascript jquery html css

Javascript 将现有div放置在现有div上，然后在它们之间切换,javascript,jquery,html,css,Javascript,Jquery,Html,Css,考虑以下HTML： <body> <div id="div1" onclick="toggleDivs();"> div1 content </div> <div id="div2" onclick="toggleDivs();" style="visibility:hidden"> div2 content </div> </body> 第1部分内容第2

考虑以下HTML：

<body>
    <div id="div1" onclick="toggleDivs();">
        div1 content
    </div>
    <div id="div2" onclick="toggleDivs();" style="visibility:hidden">
        div2 content
    </div>
</body>


第1部分内容
第2部分内容

我想要的是，当用户单击当前可见的div时，另一个div将变为可见，而当前div将变为隐藏

我尝试使用

jquery.toggle（）

和

jquery.css（“可见性”：“隐藏/可见”）

但这些技术都不起作用

切换

将起作用，但它在

显示

CSS属性上运行，而不是

可见性

。只需使用

显示

：

<div id="div1" onclick="toggleDivs();">
    div1 content
</div>
<div id="div2" onclick="toggleDivs();" style="display: none;">
    div2 content
</div>

这是一个例子

增编：与前一个解决方案相比，我不太喜欢此解决方案，但是根据OP下面的评论，如果您想使用

z-index

完成此任务，您可以像这样做：

HTML: JavaScript:

下面是一个有效的JSFIDLE：

修订守则如下：

<body>
    <div id="div1" >
         div1 content
    </div>
    <div id="div2" style="display:none">
         div2 content
    </div>
</body>

一个更简单的

z-index

解决方案是从可见的z-index中减去1。你只需要把div按相反的顺序放在页面上

$('.cycle').click(function() {
    $(this).css('z-index', $(this).css('z-index')-1);
});

JSFiddle:

你能给我一个使用z-index的例子吗？为什么你需要一个使用z-index的例子？只是好奇。因为我知道它可以使用z-index来完成，并且想知道css方面的实现差异。请参阅我的附录。z-index解决方案需要更多的脚本和样式，但你说得对。我发布了一个更简单的z-index解决方案。它也可以在一行中完成：

$（“#div1，#div2”）.toggle（）请注意，z索引解决方案需要背景以确保下面的div不可见。
.cycle {
    position: absolute; /* The important thing is that the element 
                           is taken out of the document flow */
    background: #fff;
    width: 100px;
    height: 20px;
    border: solid 1px #000;
}

$(function() {
   var cycleClick = function(e) {
        var $cycle = $('.cycle');
        $cycle.each(function() {
            var $this = $(this);
            var newZIndex = ($this.css('z-index') + 1) % $cycle.length;
            $this.css('z-index', newZIndex);
        });
        return false;
    };

    $('.cycle').click(cycleClick).each(function(idx) {
        $(this).css('z-index', idx);
    });
});

<body>
    <div id="div1" >
         div1 content
    </div>
    <div id="div2" style="display:none">
         div2 content
    </div>
</body>

$("div").click(function(){
  $("#div1").toggle();   
  $("#div2").toggle();                    
});

$('.cycle').click(function() {
    $(this).css('z-index', $(this).css('z-index')-1);
});