取消隱藏/隱藏課程

我試圖使用一個href鏈接來「onclick」切換取消隱藏和隱藏。我試過使用jQuery，javascript函數，但我似乎並不知道它足夠工作。我已經接近了。這就是我現在（我的第8次左右未遂）

styles.css的：

.noPhones{ 
    display: none; 
}

的JavaScript（contacts.tpl）：

{literal} 
<script type="text/javascript"> 
function swapMyToggledDiv() 
{ 
if(document.getElementById(".noPhones").style.display == "none") 
{ 
document.getElementById(".noPhones").style.display = "block"; 
} 
else 
{ 
document.getElementById(".noPhones").style.display = "none"; 
}</script> 
{/literal}

我的形式（contacts.tpl）：

 <tr><td> 
      <h2><a href="#" onclick="swapMyToggledDiv()">Phone</a></h2> 
     </td><td> 
      <input type="hidden" name="phone[contactId]" value="{$userData.contact_id}" /> 
      <input type="text" name="phone[tel]" size="25" value="{$userData.telTel}" /> 
     </td></tr> 

     <tr class="noPhones"><td> 
      <h2>Cell #</h2> 
     </td><td> 
      <input type="text" name="phone[cell]" size="25" value="{$userData.telCell}" /> 
     </td></tr> 

     <tr class="noPhones"><td> 
      <h2>Work #</h2> 
     </td><td> 
      <input type="text" name="phone[work]" size="25" value="{$userData.telWork}" /> 
     </td></tr> 

     <tr class="noPhones"><td> 
      <h2>Home #</h2> 
     </td><td> 
      <input type="text" name="phone[home]" size="25" value="{$userData.telHome}" /> 
     </td></tr> 

     <tr class="noPhones"><td> 
      <h2>Pager #</h2> 
     </td><td> 
      <input type="text" name="phone[pager]" size="25" value="{$userData.telPager}" /> 
     </td></tr> 

     <tr class="noPhones"><td> 
      <h2>Fax</h2> 
     </td><td> 
      <input type="text" name="phone[fax]" size="25" value="{$userData.telFax}" /> 
     </td></tr>

我需要隱藏類「noPhones」的所有行，直到單擊鏈接。

任何幫助將不勝感激！

謝謝！

來源

2011-07-13 Charlie

在jQuery的知名度繃很簡單：

function swapMyToggledDiv() 
{ 
    $(".noPhones").toggle(); 
}

如果你申請一個ID您鏈接，您可以在jQuery的已準備好的方法中應用此操作：

$(function() { 
    $("#toggle_link").click(function() { 
     $(".noPhones").toggle(); 
    }); 
});

來源

2011-07-13 19:38:54

神聖莫里！我這樣做太複雜了！那樣做了。我已經在這裏2個小時了！謝謝！！！！ – Charlie

@SquireCD：閱讀教程有助於：http://docs.jquery.com/Tutorials –

@SquireCD：非常歡迎。請享用！ –

，你不能有document.getElementById(".noPhones")

你需要給一個id屬性不是一類

來源

2011-07-13 19:37:56 TheBrain

Jquery非常整潔。你應該使用它。這非常簡單。

只要做到這一點。

步驟1：包含Jquery的

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

步驟2：設定的onclick調用函數「testFunction（）」

步驟3：定義函數

<script type="text/javascript"> 
    function testFunction() { 
    $('.noPhones').hide(); or $('.noPhones').show(); 
    // The $('.noPhones') selector selects all of the objects with a class of "noPhones" 
    // use $('#id') to select an item by ID 
    } 
</script>

如果想要做一些事情，當頁面加載只是做到這一點...

<script type="text/javascript"> 
    $(function(){ //define function here }); 
    // Stuff defined in function will execute on page load. 
</script>

希望這會有幫助 I LOVE JQUERY

來源

2011-07-13 19:48:40

你問爲什麼使用JQuery與Javascript。主要原因是瀏覽器兼容性。我們有一個整個團隊，致力於解決使用JavaScript的瀏覽器兼容性問題。 JQuery是一個黑匣子，隱藏了來自支持多種瀏覽器/平臺的麻煩。當它是一個選項時，總是使用JQuery。 –

取消隱藏/隱藏課程

回答

相關問題