我如何在div之间切换
我有2个div。 我希望div id 1在页面加载时可见，当我点击主div中的任何地方时，id应该是可见的。当用户再次点击main 2时应隐藏并且1可见。
div One visible div two visible 我如何使用Jquery完成它？ 我不知道如何获得切换效果
谢谢
十分简单。
$(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演示→
编辑
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所指出的，这个函数可以用更简洁/简洁的forms编写：
function whichIsVisible() { return $1.add($2).filter(':visible'); }
但是，它在语义上与第一个版本不同 。 第一个版本返回以下之一：
-
$1 -
$2 -
undefined
而jAndy的版本返回以下之一：
-
$1 -
$2 -
$1.add($2)，一个双元素的jQuery对象 -
$()，一个空的jQuery对象
所以他们并不完全等同 。
听起来好像
HTML
div One visible
JS
$(function() { $('#main').click(function() { $('#1, #2').toggle(); }); });
演示 ： http ： //www.jsfiddle.net/4yUqL/74/
$(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”没有空格。 😉
工作实例发布于http://jsfiddle.net/y8uwt/
HTML：
div One visible click
JS：
$(document).ready(function() { $("#button").click(function(event) { $("#1").toggle(); $("#2").toggle(); }) });