Изменение глификонов на активных вкладках

Question

Итак, я использую загрузочный лоток на своем веб-сайте, и я хочу показать маленькие значки символов рядом с вкладками, но я хочу, чтобы значки символов отображались на активной вкладке. как вы можете видеть на картинке, сейчас все вкладки имеют один и тот же значок, но я хочу, чтобы значок на активной вкладке изменился на что-то еще. Каков наилучший способ сделать это?

Спасибо

<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, то это то, что вам нужно сделать:

<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. Вы должны удалить класс, который загружает глиф и загружает другой, в зависимости от того, активен ли элемент табуляции или нет.

Answer 2

Если вы хотите решение, используя только HTML/CSS или Bootstrap, то мне очень жаль, но это просто не возможно. Вам нужно будет использовать 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>