Question

考虑以下HTML：

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

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

我尝试使用jquery.toggle()和jquery.css("visibility":"hidden/visible")，但这些技巧都没有奏效。

Answer 1

toggle ^{[API Ref]} 会有效，但它会在display CSS属性上运行，而不是visibility。只需使用display代替：

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

脚本：

function toggleDivs() {
    $('#div1, #div2').toggle();
}

这里是working example。

附录：

与前一个解决方案相比，我并不在乎这个解决方案，但是如果根据下面的OP评论，你想使用z-index来完成这个任务，那么你可以像this：

那样做

HTML：

<div id="div1" class="cycle">
    div1 content
</div>
<div id="div2" class="cycle">
    div2 content
</div>

CSS：

.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;
}

的JavaScript：

$(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);
    });
});

Answer 2

这是一个有效的jsfiddle：

http://jsfiddle.net/g5chb/1/

以下修订代码：

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

和相关的jQuery：

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

Answer 3

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

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

JSFiddle：http://jsfiddle.net/lucuma/jr7tR/3/

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

3 个答案:

附录：

HTML：

CSS：

的JavaScript：