在jQuery中隐藏和显示元素

问题描述：

我有一些菜单对象，这里是“link1”和“link2”，我想在我的网页上切换一些内容（表单）。在jQuery中隐藏和显示元素

如果form1是可见的，我点击link2，我想form1关闭和form2打开。

相关的jQuery：

$('#link1').click(function(){ 
     $('#form1:visible').hide(); 
     $('#form2:visible').hide(); 
     $('#form1:hidden').show(); 
    }); 

    $('#link2').click(function(){ 
     $('#form1:visible').hide(); 
     $('#form2:visible').hide(); 
     $('#form2:hidden').show(); 
    });

问题：我怎样才能让这个更简单？

答

$('#link1').click(function(){ 
    $('#form2').hide(); 
    $('#form1').show(); 
}); 

$('#link2').click(function(){ 
    $('#form1').hide(); 
    $('#form2').show(); 
});

它几乎没有得到任何简单。如果点击链接和表单之间有任何关联，如名称中的1和2，则可以将其浓缩为一个动态获取正确形式并显示出来的单个函数...是否有任何更简单是有争议的：

$('#link1, #link2').click(function() { 
    $('form').hide(); 
    $('#form' + this.id.substr(-1)).show(); 
});

答

可以使用toggle功能将切换可见和隐藏状态之间的元素：

var f1 = $('#form1'), f2 = $('#form2'); 

$('#link1').click(function(){ 
    f1.toggle(); 
    f2.hide(); 
}); 

$('#link2').click(function(){ 
    f1.hide(); 
    f2.toggle(); 
});

否则，缓存两个#form选择将有助于使它稍微更好。

您可以使用'toggle'得到非常不同的行为。如果你点击一个链接两次？ – deceze 2010-11-11 03:17:01

@deceze哦，我明白为什么代码与他给出的代码不同。这是一个相当迂回的做法，是的 – 2010-11-11 03:23:14

答

你可以给他们一个匹配的类，但这很简单。

你能否赐教我？ – hermansc 2010-11-11 03:21:34

答

在HTML：

<form id="form1" class="form_group1" ... > 
<form id="form2" class="form_group1" ... > 
... 
<form id="formN" class="form_group2" ... >

在javascript中：

$('#link1').click(function(){ 
    $('.form_group1').hide(); 
    $('.form_group2').show(); 
}); 

$('#link2').click(function(){ 
    $('.form_group2').hide(); 
    $('.form_group1').show(); 
});

答

我不知道如果我得到你的权利，但你必须HREF链接，所以当u单击链接2你想打开form2（如果它尚未打开），并且link1和form1的过程相同？

什么ü可以做的就是给每一个表格一个CSS类和ID，然后： $('#link1').click(function(){ $('#idOform1').css("display","block"); $('#idOform2').css("display","none"); });

$('#link2').click(function(){ $('#idOform2').css("display","block"); $('#idOform1').css("display","none"); });

在jQuery中隐藏和显示元素

相关推荐