當用戶點擊一個鏈接時隱藏/顯示錶單的元素

Question

我有一個帶有一些輸入文本和單選按鈕的表單，當用戶點擊表單的其他元素時，以及當用戶點擊再次，隱藏它們。我怎樣才能做到這一點？我認爲jquery會做這個想法，但我不是一個JavaScript開發人員，所以我需要一些指導，非常感謝！

Answer 1

下面是一個例子。如果你有以下的html：

<p>Click on the gray 'button' below.</p> 
<div id="ThingOne"> 
    Hi, I'm thing one! 
    <div id="ButtonOne" style="background-color: Gray; width: 100px">Show Thing Two</div> 
</div> 

<div id="ThingTwo"> 
    Hello, I'm thing two! 
    <div id="ButtonTwo" style="background-color: Gray; width: 100px">Show Thing One</div> 
</div> 

然後你可以使用下面的jquery。

<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#ButtonOne").click(function() { 
      $("#ThingTwo").fadeIn("slow"); 
      $("#ThingOne").fadeOut("slow"); 
     }); 

     $("#ButtonTwo").click(function() { 
      $("#ThingOne").fadeIn("slow"); 
      $("#ThingTwo").fadeOut("slow"); 
     }); 

     $("#ButtonOne").click(); 

    }); 

</script> 

請注意對.click（）的調用，它會在第一次執行時隱藏ButtonTwo div。另外，您需要根據需要更新對JQuery庫的引用。希望這可以幫助！

Answer 2

如果這是你的超級鏈接：<a id="hideshowlink">Link</a>

綁定超鏈接點擊事件，然後隱藏或顯示你在那裏要的元素。因此$('input:radio').toggle();將根據當前狀態隱藏或顯示所有單選按鈕（即，如果它們隱藏，則顯示，反之亦然）。

$(document).ready(function() { 
     $('#hideshlowlink').click(function() { 
      $('input:radio').toggle(); 
      $('#idofelementsToHideShow').toggle(); 
     }); 
}); 

如果您將所有這些元素都放在div或某個容器中，那麼只需在click事件內切換容器即可。否則，您可以自行切換每個元素。

Answer 3

你需要的東西是這樣的：

$("#linkid").click(function() { 
    $("#togglediv").toggle() 
}) 

而且你可能想要把href='#'到<a >標籤了。

或者，你可以做這樣的事情：

$("#linkid").toggle(function(event) { 
     event.preventDefault() 
     $("#togglediv").show() 
}, function(event) { 
     event.preventDefault(); 
     $("#togglediv").hide() 
}) 

這樣做的好處是可以調用其他JS處理上顯示或隱藏，可能是特定的節目或特定於一躲，等改變鏈接的文字。