个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 13:55:55 26 4
gpt4 key购买 nike

考虑以下 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") 但这些技术都不起作用。

最佳答案

切换 [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);
    });​
});

关于javascript - 将现有的 div 放在现有的 div 上，然后在它们之间切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10623034/

26 4 0
文章推荐： C++ BigInteger 类似于 Chew Keong TAN 的 C# 版本
文章推荐： Java : add some text in a video?
文章推荐： java - 由于输入错误，While 循环未运行多次
文章推荐： javascript - 全高对 Overlay 不起作用