javascript - Bootstrap 3 jquery event for active pill change - Stack Overflow

admin管理员组

文章数量:1298180

My goal is to overload Bootstrap nav pall click event, and I was happy to e across this post

I've modified the code the following way to make it work for pills, but I'm helpless to understand why it doesn't work.

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> 

JS

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

My goal is to overload Bootstrap nav pall click event, and I was happy to e across this post

I've modified the code the following way to make it work for pills, but I'm helpless to understand why it doesn't work.

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> 

JS

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

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited May 23, 2017 at 12:19 CommunityBot 111 silver badge asked Sep 26, 2016 at 13:18 Edgar NavasardyanEdgar Navasardyan 4,5091010 gold badges6969 silver badges141141 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Bootstrap pills and tabs use same javascript. Just the .nav-pills instead of .nav-tabs is different.

Replace the data-toggle="pill" with data-toggle="tab" everywhere and should work.

In Bootstrap nav-pills aka is a styling ponent not an js ponent. So data-toggle will be data-toggle="tab".

Update Fiddle for your code Fiddle

data-toggle="tab"

only change required.

-Help :)

本文标签： javascriptBootstrap 3 jquery event for active pill changeStack Overflow