使用jQuery從DIV中獲得一個類，並向第一個類中的所有DIV添加另一個類

基本上我有一個我正在創建的選項卡式面板。當用戶點擊一個標籤時，我希望面板切換出來。該選項卡具有與相應面板上的類相同的類。我想使用jQuery get（$ this）類，並且當您單擊帶有XX類的選項卡時，向所有具有XX類的DIV添加類「.active」。使用jQuery從DIV中獲得一個類，並向第一個類中的所有DIV添加另一個類

這裏是我的HTML：

<div class="bundle_panel"> 
    <div class="tab tXX">TITLE_HERE</div> 
    <div class="panel tXX">CONTENT_HERE</div> 
</div>

我已經試過這jQuery來無效應：

$(".bundle_panel .tab").click(function(){ 
    var panelClass = $(this).attr("class"); 
    $(panelClass).addClass('active'); 
});

任何幫助，將不勝感激。讓我知道是否需要澄清任何事情或提供更多信息。

來源

2012-04-06 Nicole McCoy

你面臨什麼問題。你可以在jsfiddle中創建一個樣本嗎？ – DG3 2012-04-06 15:43:31

您的標籤標題div是否總是隻有兩個類（例如「tab tXX」），或者示例中的格式是否可以更改？ – j08691 2012-04-06 15:49:04

他們將只有這兩個類，直到jQuery添加「.active」類 – 2012-04-06 15:52:57

的問題與你的例如，點擊會導致將「tab tXX」的值分配給panelClass變量。然後，您的行$(panelClass).addClass('active');正在嘗試將活動類添加到不退出的元素。如果你使用：

$(".bundle_panel .tab").click(function(){ 
    var panelClass = $(this).attr("class").split(' '); 
    $(".panel."+panelClass[1]).addClass('active'); 
});

這將活動類適用於所有元素的「面板」類和第二類的元素的點擊（使用示例代碼，TXX）。 jsFiddle example。

來源

2012-04-06 15:54:26 j08691

這真是太棒了！謝謝！但是，當我把它放在我的代碼中時，什麼都沒有發生。我很難過。它看起來完全像JS小提琴。 :(我甚至嘗試了一些簡單的，只是試圖添加類到標籤點擊。這裏的鏈接。任何建議？http://dev.thesafetyjunction.com/family-peparedness-pack/ – 2012-04-06 16:42:49

它不與任何代碼衝突，我我使用的是1.7.2庫 – 2012-04-06 16:46:31

我正在使用PHP來引入類名稱，難道可能是這樣？ – 2012-04-06 16:49:12

實現標籤一個更好的方法是從你的標籤使用id屬性爲每個「小組」，並鏈接到那些id S：

<ul> 
    <li><a href="#panel-1">Panel 1</a></li> 
    <li><a href="#panel-2">Panel 2</a></li> 
</ul> 

<section id="panel-1"> 
    <h2>Panel 1</h2> 
    <p>Content</p> 
</section> 

<section id="panel-2"> 
    <h2>Panel 2</h2> 
    <p>Content</p> 
</section>

那麼你可以簡單：

$('ul.tabs a').click(function() { 
    var target = $(this).attr('href'); 

    $(target).show(); 
});

編輯：額外的好處是它沒有JavaScript也很有意義。

EDIT2：（。）在你的代碼的問題是，您試圖選擇僅類的名稱，而不以點前綴，它應該是：

$('.' + panelClass).addClass('active');

來源

2012-04-06 15:52:00 powerbuoy

使用jQuery從DIV中獲得一個類，並向第一個類中的所有DIV添加另一個類

回答

相關問題