如何更改具有 ID 的 <div> 的类？答案

【问题标题】：How do I change the class of a <div> that has an ID?如何更改具有 ID 的 <div> 的类？
【发布时间】：2014-02-21 02:44:03
【问题描述】：

我在一个网络应用中有一个标签页，我可以在其中通过预算和菜式过滤餐厅，结果按餐点、小吃和饮料进行标签页。

我的标签基本上是按钮，它们各自的窗口就在它们下面。

这是我的标签的代码：

<ul class="nav tabs" id="tabs">
            <li id="selectMeals">
                <button href="#filterTab" data-toggle="tab" class="btn meals-tab">MEALS</button>
            </li>
            <li id="selectSnacks">
                <button href="#filterTab" data-toggle="tab" class="btn snacks-tab">SNACKS</button>
            </li>
            <li id="selectDrinks">
                <button href="#filterTab" data-toggle="tab" class="btn drinks-tab">DRINKS</button>
            </li>
</ul>

我的按钮有一个指向一个 div 的 href，它将显示包含此代码的内容：

<div class="tab-content">
            <div id="filterTab" class="tab-pane meals-tab-box">
                     <div class="results"></div>
            </div>
</div>

我的选项卡是颜色协调的，当我单击任何选项卡时，选项卡内容的背景颜色不会更改为选项卡的颜色。这是因为

<div id="filterTab" class="tab-pane meals-tab-box">

只有当我希望在单击相应按钮时将其更改为小吃标签框或饮料标签框时，才具有类餐标签框。（*-tab-box CSS 只有不同的背景颜色）

有没有办法通过 Javascript 在引用时更改 div 的类？

【问题讨论】：

使用哪个tab插件？
如果我没记错的话，这是 Twitter 的 Bootstrap。
是的 twitter 引导程序，抱歉我漏掉了...
您是否尝试过捕获标签事件并通过它们进行处理？
我没有在代码中尝试过任何东西，但我一直在想的是，例如，当单击饮料标签时，我将调用 document.getElementById("filterTab")。 className="drinks-tab-box"

标签： javascript jquery html css tabs

【解决方案1】：

您可以使用标签小部件的show event 并尝试类似

jQuery(function ($) {
    $('#tabs').tabs();
    var $filterTab = $('#filterTab');
    var $filterBtns = $('#tabs').find('button[href="#filterTab"]');
    var filterClasses = $filterBtns.map(function () {
        return this.className.match(/[^\s]+-tab/) + '-box'
    }).get().join(' ');
    $filterBtns.on('show', function (e) {
        var $btn = $(e.target),
            clazz = e.target.className.match(/[^\s]+-tab/) + '-box';
        var clazz = $filterTab.removeClass(filterClasses).addClass(clazz);
    })
});

演示：Fiddle

【讨论】：

在小提琴中完美运行，但我无法让它在我的实际代码上运行。
@nutellafella 那么你的代码和小提琴之间有一些区别......你能检查使用的引导版本以及 html 是否真的与你所拥有的相匹配
@nutellafella 除非问题被重新创建，否则没有什么可以做的
@nutellafella 那么请分享您的解决方案，以便我们也可以看看它

【解决方案2】：

如果你可以使用 jquery，你可以像这样操作它，例如：

$('.tab li').removeClass('selected');
$('#selectMeals').addClass('selected');

【讨论】：

【解决方案3】：

你可以捕获和处理 Bootstrap 的 tabs 事件：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

您可以在事件中更改选项卡的类，可以使用jQuery来更改类。

另外，你有show.bs.tab 事件，这里有更多细节： http://getbootstrap.com/javascript/#tabs

【讨论】：