在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(); 
    });

問題：我怎樣才能讓這個更簡單？

來源

2010-11-11 hermansc

$('#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(); 
});

來源

2010-11-11 03:15:05 deceze

可以使用toggle功能將切換可見和隱藏狀態之間的元素：

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

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

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

否則，緩存兩個#form選擇將有助於使它稍微更好。

來源

2010-11-11 03:14:13

您可以使用'toggle'得到非常不同的行爲。如果你點擊一個鏈接兩次？ – deceze 2010-11-11 03:17:01

@deceze哦，我明白爲什麼代碼與他給出的代碼不同。這是一個相當迂迴的做法，是的 – 2010-11-11 03:23:14

你可以給他們一個匹配的類，但這很簡單。

來源

2010-11-11 03:16:22 austinbv

你能否賜教我？ – 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(); 
});

來源

2010-11-11 03:22:52

我不知道如果我得到你的權利，但你必須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"); });

來源

2010-11-11 03:47:02 shadesco

在jQuery中隱藏和顯示元素

回答

相關問題