Question

基本上我有一个我正在创建的标签面板。当用户单击选项卡时，我希望面板切换出来。该选项卡的类与相应面板上的类相同。我想使用jQuery get（$ this）类，并说当你点击带有XX类的选项卡时，将类“.active”添加到XX类的所有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');
});

任何帮助将不胜感激。如果我需要澄清任何内容或提供更多信息，请告诉我。

Answer 1

更好的实施标签的方法是为每个“面板”使用id属性，并从标签中链接到这些id：

<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');

Answer 2

您的示例的问题是，单击将导致将“tab tXX”的值分配给panelClass变量。然后您的行$(panelClass).addClass('active');正在尝试将活动类添加到不退出的元素。如果您使用：

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

这会将活动类应用于具有“panel”类的所有元素，并且单击该元素的第二个类（使用示例代码TXX）。的 jsFiddle example

使用jQuery从DIV获取类，并使用第一个类向所有DIV添加另一个类

2 个答案: