用于主动药丸更改的引导 3 jquery 事件答案

【问题标题】：Bootstrap 3 jquery event for active pill change用于主动药丸更改的引导 3 jquery 事件
【发布时间】：2016-09-26 13:18:53
【问题描述】：

我的目标是重载 Bootstrap nav pall 点击事件，我很高兴遇到this post

我已经按照以下方式修改了代码，使其适用于药丸，但我无法理解为什么它不起作用。

HTML：

<ul class="nav nav-pills" id="orders_tab">
                <li class="active"><a data-toggle="pill" href="#orders_for_today">Текущие</a></li>
                <li><a data-toggle="pill" href="#orders_sent_to_vendors">Ожидающие</a></li>
                <li><a data-toggle="pill" href="#inventories">Остатки</a></li>
                <li><a data-toggle="pill" href="#sales">Продажи</a></li>
                <li><a data-toggle="pill" href="#sales_aggregate">Аггрегированные продажи</a></li>
                <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle = "dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                      Прочее <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li> 
                        <li><a href="#orders_products">Продукты</a></li>
                    </ul>
                </li>
            </ul>

$('a[data-toggle="pill"]').on('shown.bs.pill', function (e) {
        var target = $(e.target).attr("href") // activated tab
        alert(target);
    });

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

在 Bootstrap 中，nav-pills aka 是一个样式组件，而不是一个 js 组件。所以数据切换将是data-toggle="tab"。

为您的代码更新 Fiddle Fiddle

data-toggle="tab"

只需要更改。

-帮助:)

【讨论】：

【解决方案2】：

引导药丸和标签使用相同的 javascript。只是 .nav-pills 而不是 .nav-tabs 是不同的。

在任何地方用data-toggle="tab" 替换data-toggle="pill"，应该可以工作。

【讨论】：

@EdgarNavasardyan 是的