javascript - Bootstrap not switching back and forth repeatedly between the same tabs -
recently i've come across (http://bootsnipp.com/snippets/featured/e-mail-interface) snippet , started experiment noticed there odd behaviour regarding switching , forth tabs.
essentionally expierence when user switches tabs different hash location, switching works expected (#inbox -> #compose -> #trash -> #inbox). in event user switches repeatedly between same tabs i.e. #inbox -> #compose -> #inbox doesn't perform switch.
is there in particulair causes behaviour?
the structure of dom isn't supported bootstrap tab stuff.
the 'compose' button should part of navbar ul
.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li style="padding-right:20px;border-right:1px solid #ccc;"> <p> <a type="button" class="btn btn-danger navbar-btn" style="height: 35px; color:#fff;" href="#compose" role="tab" data-toggle="tab"> <span class="glyphicon glyphicon-pencil"></span> compose</a> </p> </li> <li> <a href="#inbox" role="tab" data-toggle="tab"> inbox <span class="label label-success">10</span> .....
as opposed to:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="btn-compose pull-left"> <a type="button" class="btn btn-danger navbar-btn" href="#compose" role="tab" data-toggle="tab"> <span class="glyphicon glyphicon-pencil"></span> compose</a> </div> <ul class="nav navbar-nav"> <li> <a href="#inbox" role="tab" data-toggle="tab"> inbox <span class="label label-success">10</span>
here's working fiddle. fixes problem original has clicking 'compose' on small screen open inbox.
Comments
Post a Comment