Question

任何人都可以告诉我为什么以下JavaScript代码会在执行时扩展Bootstrap Tab容器中的Bootstrap按钮组：

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
}

HTML如下所示：

<div class="tabs-color-profile">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#myProfile">My Profile</a></li>
        <li><a data-toggle="tab" href="#partner">Partner</a></li>
        <li><a data-toggle="tab" href="#dependants">Dependants</a></li>
    </ul>
</div>

     <div class="tab-pane fade" id="dependants">

        <div class="row">
            <div class="col-md-12">
                <h3>Dependants</h3>

                <div class="btn-toolbar">
                    <div class="btn-group">
                        <div class="btn-group open">
                            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                                <span class="glyphicon glyphicon-plus"></span>
                                Add Dependant
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">My Dependant</a></li>
                                <li><a href="#">Partner's Dependant</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
             </div>
         </div>
      </div>

其他标签HTML已被省略以清理它。

注意：我使用JS根据位置哈希中的名称自动加载正确的选项卡。

Answer 1

是

更改

<div class="btn-group open">

要

<div class="btn-group">

Bootstrap .tab（'show'）也扩展了Group Button

1 个答案: