更改活动标签上的图标

因此，我在我的网站上使用引导程序，并且希望显示标签旁边的小字形图标，但我希望字形图标在活动选项卡中更改。就像你在图片上看到的那样，现在所有的标签都有相同的图标，但是我希望活动标签上的图标变成其他东西。做这个的最好方式是什么？更改活动标签上的图标

谢谢

<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>

来源

2015-10-18 grim1369

请发布一个最小的，你的代码的实例（HTML/CSS/JS）。 [mcve] – vanburen

对不起，我忘了。它现在完成 – grim1369

如果你想只使用html/css或bootstrap的解决方案，那么我很抱歉，但这是不可能的。您将需要使用JavaScript或类似的东西。 – salmanxk

如果你想要一个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>

我删除加载字形的类。现在添加这个CSS：

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

这个解决方案确实需要一些改变HTML。您必须移除加载字形的类并加载另一个类，具体取决于选项卡元素是否处于活动状态。

来源

2015-10-18 07:06:07 Astuanax

我可以说：非常感谢！这太神奇了！我从来没有像CSS这样的东西是可能的！再次感谢你 – grim1369

如果你只使用HTML/CSS或引导要解决那么我很抱歉，但它只是不可能的。您将需要使用JavaScript或类似的东西。

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

<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>

来源

2015-10-18 04:05:57 salmanxk

更改活动标签上的图标

回答

相关问题