Question

我有2个div。我希望div id 1在加载页面时可见，当我点击主div中的任何地方时，id应该是可见的。当用户再次点击main 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
undefined

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

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

所以他们不是严格等同。

Answer 2

听起来像

HTML

<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;display:none; ">div two visible</div>
</div>

JS

$(function() {
    $('#main').click(function() {
       $('#1, #2').toggle();
    });
});

演示：http://www.jsfiddle.net/4yUqL/74/

Answer 3

$(function(){
    // start out hiding the second
    $('#2').hide();

    // when they click the main div
    $('#main').click(function(){
        // make one hide and the other show.
        $('#1,#2').toggle();
    });
});

应该做的伎俩。工作示例：http://www.jsfiddle.net/bradchristie/3XznV/1/ ~~（请原谅红色背景，想知道点击的位置。; - ）~~

编辑：修正了样式表（边框），因此“1”和“px”没有空格。 ; - ）

Answer 4

工作示例发布于http://jsfiddle.net/y8uwt/

HTML：

<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="display:none;width:300px;height:50px; ">div two visible</div>
</div>

<a href="#" id="button">click</a>

JS：

$(document).ready(function() {
    $("#button").click(function(event) {
        $("#1").toggle();
        $("#2").toggle();
    })
});

我如何在div之间切换

4 个答案:

修改