javascript - Bootstrap 不会在相同选项卡之间反复来回切换

Question

最近我遇到了这个 ( http://bootsnipp.com/snippets/featured/e-mail-interface ) 片段，当我开始试验它时，我注意到在来回切换到选项卡时有一些奇怪的行为。

基本上我的经验是，当用户切换到具有不同哈希位置的选项卡时，切换会按预期进行(#inbox -> #compose -> #trash -> #inbox)。但是，如果用户在相同的选项卡之间重复切换，即#inbox -> #compose -> #inbox，它不会执行切换。

有没有什么特别的原因会导致这种行为？

Answer 1

Bootstrap Tab stuff 不支持 DOM 结构.

“撰写”按钮应该是导航栏 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>
                    .....

相对于:

<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 a working fiddle.它还解决了原版中在小屏幕上单击“撰写”会打开收件箱的问题。