0

基本上，我正在创建一个选项卡式面板。当用户单击选项卡时，我希望面板切换出去。该选项卡具有与相应面板上的类相同的类。我想使用 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');
});

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

4

2 回答 2

1

实现选项卡的更好方法是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-06T15:52:00.540 回答
1

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

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

这会将活动类应用于所有具有“面板”类和单击元素的第二类的元素（使用您的示例代码，TXX）。jsFiddle 示例。

于 2012-04-06T15:54:26.100 回答