更改活动选项卡上的字形

Question

所以我在我的网站上使用 bootstrap，我想在选项卡旁边显示一个小字形图标，但我希望字形图标在活动选项卡中更改。正如您在图片上看到的，现在所有选项卡都具有相同的图标，但我希望活动选项卡上的图标更改为其他图标。最好的方法是什么？

谢谢

<ul class="nav nav-pills outline" id="prodtabs" role="tablist">
    <li role="presentation" class="tab-title active outline"><a href="#tabprodesc" aria-controls="home" role="tab" data-toggle="tab">product description<i class="fa fa-angle-down"></i></a></li>
    <li role="presentation" class="tab-title outline"><a href="#tabdetail" aria-controls="profile" role="tab" data-toggle="tab">detail specification <i class="fa fa-angle-down"></i></a></li>
    <li role="presentation" class="tab-title outline"><a href="#tabreviews" aria-controls="messages" role="tab" data-toggle="tab">reviews <i class="fa fa-angle-down"></i></a></li>

  </ul>

Answer 1

如果您想要仅使用 HTML/CSS 或 Bootstrap 的解决方案，那么很抱歉，但这是不可能的。您将需要使用 JavaScript 或类似的东西。

以下是一个 jQuery 代码示例，它会在页面加载后立即更改带有 fa-angle-down 的项目的 class。不是一个确切的解决方案，但我希望你能从这里开始工作？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.fa-angle-down').addClass('fa-twitter');
$('.fa-angle-down').removeClass('fa-angle-down');
});
</script>

Answer 2

如果您想要 HTML/CSS 解决方案，那么您需要这样做：

<ul class="nav nav-pills outline" id="prodtabs" role="tablist">
    <li role="presentation" class="tab-title active outline"><a href="#tabprodesc" aria-controls="home" role="tab" data-toggle="tab">product description<i class="fa"></i></a></li>
    <li role="presentation" class="tab-title outline"><a href="#tabdetail" aria-controls="profile" role="tab" data-toggle="tab">detail specification <i class="fa"></i></a></li>
    <li role="presentation" class="tab-title outline"><a href="#tabreviews" aria-controls="messages" role="tab" data-toggle="tab">reviews <i class="fa"></i></a></li>

  </ul>

我删除了加载字形的 class。现在添加这个 css:

ul.nav-pills li.tab-title i.fa:before {
    content: "\f107";
}
ul.nav-pills li.active i.fa:before {
    content: "\f005";
}

此解决方案确实需要对 HTML 进行一些更改。您必须删除加载字形的 class 并根据选项卡元素是否处于活动状态加载不同的字形。

更改活动选项卡上的字形

Changing the glyphicons on active tabs

tabs

twitter-bootstrap

glyphicons