javascript - 我如何在 div 之间切换

Question

我有 2 个 div。我希望 div id 1 在页面加载时可见，并且当我单击主 div 中的任何位置时，div id 2 应该可见。当用户再次单击主 div 2 时，应隐藏而 1 可见。`

<div id="main" style="border:1 px dashed red;" >
  <div id="1" style="width:300px;height:50px; ">div One visible</div>
  <div id="2" style="width:300px;height:50px; ">div two visible</div>
</div>

如何使用 Jquery 完成它？我不知道如何获得切换效果

谢谢

Answer 1

简单易行。

$(function ()
{
    var $main = $('#main'),
        $1 = $('#1'),
        $2 = $('#2');
    
    $2.hide(); // hide div#2 when the page is loaded
    
    $main.click(function ()
    {
        $1.toggle();
        $2.toggle();
    });
});

jsfiddle demo →

<小时/>

编辑

OP 评论:“我是否可以跟踪哪个 div 是可见的？”

当然有；这取决于您想如何使用它。您可以手动维护标志:

$(function ()
{
    var $main = $('#main'),
        $1 = $('#1'),
        $2 = $('#2'),
        $visible;
    
    $2.hide(); // hide div#2 when the page is loaded
    $visible = $1;
    
    $main.click(function ()
    {
        $1.toggle();
        $2.toggle();
        $visible = ($visible === $1 ? $2 : $1);
    });
});

或者您可以编写一个函数来帮您计算:

$(function ()
{
    var $main = $('#main'),
        $1 = $('#1'),
        $2 = $('#2');
    
    $2.hide(); // hide div#2 when the page is loaded
    
    $main.click(function ()
    {
        $1.toggle();
        $2.toggle();
    });
    
    
    function whichIsVisible()
    {
        if (!$1.is(':hidden')) return $1;
        if (!$2.is(':hidden')) return $2;
    }
});

如jAndy指出，这个函数可以写成更简洁的形式:

function whichIsVisible()
{
    return $1.add($2).filter(':visible');
}

但是，它与第一个版本在语义上不同。第一个版本返回以下之一:

• $1
• $2
• 未定义

而 jAndy 的版本返回以下之一:

• $1
• $2
• $1.add($2)，一个二元素 jQuery 对象
• $()，一个空的 jQuery 对象

所以它们并不严格等同。