更改活動標籤上的圖標

因此，我在我的網站上使用引導程序，並且希望顯示標籤旁邊的小字形圖標，但我希望字形圖標在活動選項卡中更改。就像你在圖片上看到的那樣，現在所有的標籤都有相同的圖標，但是我希望活動標籤上的圖標變成其他東西。做這個的最好方式是什麼？更改活動標籤上的圖標

謝謝

<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

更改活動標籤上的圖標

回答

相關問題