Question

我在网络应用程序中有一个标签页，我可以通过预算和美食过滤餐馆，结果以餐，小吃和饮料为标签。

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

这是我的标签的代码：

<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>

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

<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的类？

Answer 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

Answer 2

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

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

Answer 3

您可以捕获并处理Bootstrap的标签事件：

$('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

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

3 个答案: