Question

我有以下HTML：

<div class="tabs-links">
  <a href="http://localhost:5000/index#tabpanel1">Tab 1</a>
  <a href="http://localhost:5000/index#tabpanel2">Tab 2</a>
</div>

<div id="tabpanel1">Tab Panel 1</div>
<div id="tabpanel2">Tab Panel 2</div>

我需要在“tabs-links”中找到所有A，获取“＃”之后的值，并将CSS类“inactive”添加到所有选项卡面板。所以我有：

    var tabsLinks = $(".tabs-links").find("a");
    var tabsPanels = tabsLinks.map(function () { 
      return $("#" + this.href.split("#")[1]) 
    });

如何将“非活动”类添加到所有tabsPanels？
有没有办法改进我的代码？

Answer 1

您只需向这些div标签添加一个类

即可

<div class="tab-panel" id="tabpanel1">Tab Panel 1</div>

然后再做

$(".tab-panel").addClass("inactive")

或者如果你想按照自己的方式去做

$(".tabs-links a").each(function () { 
    $("#" + this.href.split("#")[1]).addClass("inactive");
});

Answer 2

var hashes = [];
$.each($('.tabs-links a'), function(key, element) {
    hashes.push($(element).attr('href').split('#')[1]);
});
console.log(hashes);

将CSS类添加到多个元素

2 个答案: