web-dev-qa-db-ja.com

jQueryを使用してアクティブなBootstrap 3タブを変更する

JQueryを使用してプログラムでタブを変更する実験をしていました。 @MasterAM here で提供されるソリューションを実装しようとしました。ただし、ChromeコンソールはエラーUncaught TypeError: undefined is not a function

これが私のHTMLです。

<div id="click-me-div">Click Me</div>

 <ul class="nav nav-tabs">
    <li class="active"><a href="#fruits" data-toggle="tab">I like Fruits</a></li>
    <li><a href="#veggies" data-toggle="tab">I like Veggies Too</a></li>
    <li><a href="#samosas" data-toggle="tab">But Samosa's Rock</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="fruits">Apple, Kiwi, Watermellon</div>
    <div class="tab-pane" id="veggies">Kale, Spinach, Pepper</div>
    <div class="tab-pane" id="samosas">Awesome, Spine Tingling, Explosive</div>
</div>

そして、これがjQueryです。

$(document).ready(function() {
    $("#click-me-div").click(function() {
        alert('yes, the click actually happened');
        ('.nav-tabs a[href="#samosas"]').tab('show');
    });
});

望ましい結果は、「Click Me」をクリックすると、アクティブなタブが「samosas」タブに変わるはずです。

私は何を間違えていますか？

javascriptjqueryhtmltwitter-bootstrap-3
16
Dirty Penguin

JQuery関数を省略しました

$(document).ready(function() {
    $("#click-me-div").click(function() {
        alert('yes, the click actually happened');
        $('.nav-tabs a[href="#samosas"]').tab('show');
    });
});

フィドル

40
Motti Horesh

このコードを試してください

タブのonclick()関数とパスID名を使用できます。

<a onclick='ActivTab("Security")' class="nav-link" data-toggle="tab" href="#Security" aria-controls="profile" role="tab" id='Security'>Security</a>


    <script>
         $(document).ready(function(){
             ActivTab('Security');
         });
         function ActivTab(id){
//           $('.nav-tabs a[href="#' + id + '"]').tab('show');
             $('.nav-tabs a[href="#' + id + '"]').trigger('click');
         };
     </script>
3
Ayman Elshehawy