Question

我使用.btn-group-justified作为一组标签的导航元素。它似乎按预期运作;但是，当单击组中的任何给定按钮时，它将获取.active类。现在，这很好，但问题是，即使单击另一个按钮，也会保留此类。这是一个example page。 “配置”下的三个橙色按钮组显示出意外行为。我已经尝试过从重新设置各种div的嵌套到包含.container以嵌套row和各种大小的col中的所有内容的所有内容，但是完全无法根除这种行为。

我知道，每当点击.active的另一个成员时，使用jQuery清除.btn-group-justified类是相对简单的，但似乎这种行为是意外的，可能是代码中某处出错的结果。但是，如果此行为是错误的结果，我找不到它。

Answer 1

看看：http://getbootstrap.com/javascript/#tabs-examples。你会发现一个使用标签和下拉列表的exapmle。现在您使用的是btn-groups而不是标签。

您可以使用标签javascript插件中的data-toggle="tab"。这个插件需要一些html结构，这与你当前的结构不一样。另请阅读：http://getbootstrap.com/components/#nav-tabs这将显示标签还有一个类.nav-justified。

请用以下内容替换您的btn-groups以解决问题：

<ul class="nav nav-tabs nav-justified" id="myTab">
        <li class=""><a data-toggle="tab" href="#home">Home</a></li>
        <li class=""><a data-toggle="tab" href="#profile">Profile</a></li>
        <li class="dropdown active">
          <a data-toggle="dropdown" class="dropdown-toggle" id="myTabDrop1" href="#">Dropdown <b class="caret"></b></a>
          <ul aria-labelledby="myTabDrop1" role="menu" class="dropdown-menu">
            <li class="active"><a data-toggle="tab" tabindex="-1" href="#dropdown1">@fat</a></li>
            <li class=""><a data-toggle="tab" tabindex="-1" href="#dropdown2">@mdo</a></li>
          </ul>
        </li>
</ul>
      <div class="tab-content" id="myTabContent">
        <div id="home" class="tab-pane fade">
          <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
        </div>
        <div id="profile" class="tab-pane fade">
          <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
        </div>
        <div id="dropdown1" class="tab-pane fade active in">
          <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
        </div>
        <div id="dropdown2" class="tab-pane fade">
          <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
        </div>

Bootstrap .btn-group-justified不正确地保留.active类何时

1 个答案: