Question

我在导航栏中的链接中添加了data-toggle="collapse"，点击链接时>应更改为v，当点击其他标签时，它应更改为{{1} }} 但看起来崩溃功能不起作用。在CSS我有更改图标的代码，有人可以在这里提出问题提前致谢

以下是代码段： -

在css文件中

<body>
  <div class="container">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
      <nav class="nav-sidebar">
        <ul class="nav tabs">
          <li class="active"><a href="#tab1" data-toggle="tab" data-toggle="collapse" data-target="#tab1">tab1</a></li>
          <li class=""><a href="#tab2" data-toggle="tab" data-toggle="collapse" data-target="#tab2"> Tab2</a></li>
          <li class=""><a href="#tab3" data-toggle="tab" data-toggle="collapse" data-target="#tab3"> Tab3</a></li>
        </ul>
      </nav>
    </div>
    <!-- tab content -->
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 tab-content">
      <div class="tab-pane active text-style collapse in" id="tab1">
        <p> This is Tab1 content </p>
      </div>
      <div class="tab-pane text-style collapse" id="tab2">
        <p> This is Tab2 content </p>
      </div>
      <div class="tab-pane text-style collapse" id="tab3">
        <p> This is Tab3 content </p>
      </div>
    </div>
  </div>
</body>

Answer 1

这里有几件事。您不需要使用崩溃，因为您正在使用引导程序的选项卡，因此您可以抓住崩溃。因此，您不需要将数据目标和数据切换放在href中，因为bootstraps选项卡会处理此问题，您只需要使用data-toggle="tab"，它将切换选项卡href值。然后，您也可以从选项卡窗格中删除折叠类。也就是说，当您点击链接时，bootstap将更改li的活动类，以便您可以从那里更改后续内容。所以它看起来像这样：

这是一个小提示，向您显示更改Fiddle

修订版Html：

<ul class="nav tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
</ul>
</nav>
</div>
<!-- tab content -->
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 tab-content">
<div class="tab-pane fade active in" id="tab1">
<p> This is Tab1 content  </p>
</div>
<div class="tab-pane fade" id="tab2">
<p> This is Tab2 content  </p>    
</div>
<div class="tab-pane fade" id="tab3">
<p> This is Tab3 content  </p>
</div>
</div>
</div>

修订Css：

.nav-sidebar a:after{
  content: "\e114";
  font-family: 'Glyphicons Halflings';
  color: grey;
  float: right;
}
.nav-sidebar li.active a:after{
  content: "\e080";
}

崩溃不在siderbar工作

1 个答案: