jQuery的 - 顯示和隱藏多個div

我試着去學習一些JavaScript/jQuery的，但我不是做非常多的進步..jQuery的 - 顯示和隱藏多個div

我有多個div像這樣：

<div class="article1" style="display:none;">content</div> 
<div class="article2" style="display:none;">content</div> 
<div class="article3" style="display:none;">content</div>

在每個類別i有一個文本鏈接，一旦點擊它，我希望它顯示特定的分區。

像這樣：

<a href="javascript:toggle(1);" class="showarticle">View Article</a>

所以我想我會想辦法讓我可以給一個ID的功能，並顯示在點擊的股利，這是我的嘗試：

<script> 

      function toggle(id) { 
      $(".showarticle").click(function()){ 
       $(".article" + id).show(); 
       }  
      } 

</script>

然而沒有任何反應，但我看不出有什麼問題..

有人可以告訴我什麼我不在這裏嗎？

感謝

編輯：我已經包括jQuery庫;）

來源

2013-02-25 user1362916

這不是你如何使用事件處理程序。

事件處理程序被加載一次，然後靜靜地坐在後臺，等待觸發它們的東西。在你的情況下，你想加載一個click hander（在DOM被加載後），等待點擊一個鏈接。

就是這樣。 HTML：

<a href="#" id="1" class="showarticle">View Article</a>

JS：

$(document).ready(function() {   // wait for DOM to load 
    $(".showarticle").click(function(e) { // click handler for all .showarticles 
     e.preventDefault();    // cancel normal click behavior 
     $(".article" + this.id).show(); // if id="1", shows '.article1' 
    }); 
});

這就是 '最小，變化' 的版本。最佳做法是在鏈接上使用data-屬性而不是ID，ID使用ID代替div上的類，並使用樣式表在開始時全部隱藏它們。

CSS：

.togglediv { 
    display:none; 
}

HTML：

<div id="article1" class="togglediv">content</div> 
<a href="#" data-togglediv="article1" class="showarticle">View Article</a>

JS：

$(document).ready(function() {   // wait for DOM to load 
    $(".showarticle").click(function(e) { // click handler for all .showarticles 
     e.preventDefault();    // cancel normal click behavior 
     $div = $('#'+$(this).data('togglediv')); // http://api.jquery.com/data 
     $div.show();      // or $div.toggle() to show and hide 
    }); 
});

http://jsfiddle.net/mblase75/sT6gw/

來源

2013-02-25 22:41:27 Blazemonger

JavaScript版本可能是這樣的，如下圖所示，需要分配唯一的ID對每個格：

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == "inline") { 
     e.style.display = 'none'; 
    } 
    else if(e.style.display == "none") { 
     e.style.display = "inline"; 
    } 
}

來源

2013-02-25 22:38:50

每次您單擊其中一個a標記，您將click事件綁定到.showarticle但您不執行該操作，一種方法是：

function toggle(id) { 
    $(".article" + id).show(); 
}

你應該使用id來代替這個類。

來源

2013-02-25 22:39:37 martriay

固定的標記，看起來像這樣：（除去從數CL屁股，刪除標記javascript函數）

<div class="article" style="display:none;">content</div> 
<a href="#" class="showarticle">View Article</a> 
<div class="article" style="display:none;">content</div> 
<a href="#" class="showarticle">View Article</a> 
<div class="article" style="display:none;">content</div> 
<a href="#" class="showarticle">View Article</a>

然後只是這樣做：固定的語法，去除添加單擊處理每一次點擊，簡單的代碼。

$(".showarticle").click(function() { 
    $(this).prev(".article").show(); 
});

編輯：現在還，你想要以前的顯示，只顯示最近點擊隱藏：

$(".showarticle").click(function() { 
    $('.article').hide(); 
    $(this).prev(".article").show(); 
});

編輯：另一種方式來切換：假定只有這些「文章」和'showarticle'classes

$(".showarticle").click(function() { 
    $('.article').hide().eq($('.showarticle').index(this)).show(); 
});

來源

2013-02-25 22:45:03

jQuery的 - 顯示和隱藏多個div

回答

相關問題