Как изменить цвет активной ссылки в bootstrap css?

Я использую joomla 3 и bootstrap.min.js Я создаю меню и предоставляю специальный класс, чтобы менять наведение, активные, посещенные ссылки и стиль меню. Я не мог найти, как изменить цвет активной ссылки в меню. Предположим, у меня есть 2 меню. Дом и контакт. Когда я нахожусь в Доме, он красный, я хочу изменить этот цвет. Я мог бы изменить: active и a: hover. Вот код:

.topmenu .active a,
.topmenu .active a:hover {
    background-color: white;
}
.topmenu > li > a{
    color: orange;
    font-weight:bold;
}
.topmenu > li > a:hover {
    color: black;
    background:white;
}

Даже я использовал div для изменения цвета активной ссылки. Вот код

#top-menu a{
background-color: white;
color: orange;
font-weight:bold;
}
#top-menu a:focus
{
    color: orange;
}
#top-menu a:hover{
    color: black;
}

Каждый раз, когда я нажимаю "Домой", он активируется, а цвет - красный. Я хочу изменить его на оранжевый. Не удается найти, как это сделать.

Вот мой код разметки

<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="item-109 current active"><a href="/joomla3/">Home</a></li>
<li class="item-138"><a href="/joomla3/?Itemid=138"> Russian </a></li>
<li class="item-110"><a href="/joomla3/?Itemid=110"></a></li></ul>
</div>

Что вы предлагаете мне делать?

Ответ 1

Наконец, с экспериментами я нашел, как его захватить.

#top-menu .current a
{
    color: orange !important;
}

Спасибо всем за ваше время и помощь. Очень ценим!

Ответ 2

Я предлагаю вам создать селектор ID (#) локально для Div, который содержит ссылки a, затем возьмите это имя id в вашей таблице стилей и переопределите существующее правило.

Например,

#abc a{xxx:xxx;}
#abc a:active{xxx:xxx;}

Надеюсь, что это поможет.

Ответ 3

Чтобы сделать то, что вы пытаетесь сделать, вы должны сначала понять a: hover Must прийти после a: link и a: visited > в определении CSS, чтобы быть эффективными. Если они не в этом порядке, то они не сработают. Во-вторых, вы должны понимать, что если вы, когда мышление (a: active) означало цвет текущей ссылки, конечный пользователь был включен, это неверно. (a: active) изменяет цвет при нажатии на ссылку. Вы можете проверить это, удерживая нажатой кнопку мыши на ссылке, которую вы сделали другим цветом с помощью (a: active).

Наконец, если вы пытаетесь сделать это, используя только CSS, вам нужно добавить определенный класс в текущую ссылку на которую включен конечный пользователь. Ниже я оставил вам пример, надеюсь, что это поможет:)

Ваша панель навигации, как следует... -Home
-Россия
-Италия

Мы находимся на странице Италии для этого примера:

/*YOUR CSS SHOULD LOOK LIKE THIS*/

/* unvisited link grey */
#top-menu a:link {
	color: #777;
}
/* visited link grey */
#top-menu a:visited {
	color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
	color: #0CF;
}
/* selected link blue */
#top-menu a:active {
	color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
	color: #0CF !important
}

<div id="top-menu">
  <ul class="nav menu nav-pills topmenu">
    <li><a href="http://yourdomain.com/page1.html">Home</a></li>
    <li><a href="http://yourdomain.com/page2.html">Russian</a></li>
    <li class="activePage"><a href="http://yourdomain.com/page3.html">Italy</a></li><!--Page End User Is On-->
    <!--Look UP ^^^^^^^^ Hope this helps :)-->
  </ul>
</div>

Ответ 4

Для изменения текущего цвета активной ссылки мы можем использовать код во внешнем файле css или inline css

.active a
{
background-color:#ff0000;
}

Ответ 5

Если вы хотите глобально изменить цвета ссылок (или почти что-нибудь еще), создайте индивидуальную загрузку: http://twitter.github.io/bootstrap/customize.html

В ответ на ваш комментарий, если вы хотите переопределить поставляемый CSS, вам нужно создать более конкретное правило. Итак, создайте селектор типа #my-custom-container .item-109 .current .active или добавьте !important к вашему правилу (правилам) для .item-109 .current .active

Ответ 6

// Fix navigation menu active links
$(document).ready(function(){
    var path = window.location.pathname,
        link = window.location.href
    ;
    $('a[href="'+path+'"], a[href="'+link+'"]').parent('li').addClass('active');
});

Ответ 7

Попробуйте изменить CSS на .item-109 { color: white !important; }.

Здесь ссылка на дополнительную информацию о !important.

Ответ 8

        $(function (){
            $('nav ul li a.sub-menu').each(function(){
                var path = window.location.href;
                var current = path.substring(path.lastIndexOf('/')+1);
                var url = $(this).attr('href');
                if(url == current){
                    $(this).addClass('active');
                };
            });     
        });