手动更改aria-expanded =“ true”不会打开新标签页

Question

I would like to open another tab after certain action is true. Here you see my bootstrap navbar and the jQuery script.

<ul class="nav navbar-default nav-justified" role="tablist" id="navbar">
<li role="presentation" class="active"><a id="tab1" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation" ><a id="tab2" href="#msg" aria-controls="msg" role="tab" data-toggle="tab">Messages</a></li>
</ul>

And here is the script.

$("#password-button").on("click", function () {

    if($("#password-name").val() === password)    {

    $("#tab1").attr("aria-expanded", "false");
    $("#tab2").attr("aria-expanded", "true");

    }
    }

Firebug shows me that it changes those attributes but nothing happens?

Answer 1

Use .tab() property to show or hide tab from Jquery. Try this:

$('.nav-tabs a[href="#tab1"]').tab('show');

Working DEMO