Как изменить цвет активной ссылки в bootstrap css?
Я использую joomla 3 и bootstrap.минута.Яш Я создаю меню и даю специальный класс, чтобы изменить наведение, активные, посещенные ссылки и стиль меню. Я не мог найти, как изменить цвет активной ссылки меню. Предположим, у меня есть 2 меню. Дом и контакт. Когда я дома он красный, я хочу изменить этот цвет. Я мог бы изменить a: 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;
}
каждый раз, когда я нажимаю на Home, он активируется, и цвет красный. Что я хочу изменить на оранжевый. Не могу найти как это сделать.
вот мой код разметки
<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>
что вы предлагаете мне сделать?
8 ответов
наконец, с экспериментами я нашел, как его захватить.
#top-menu .current a
{
color: orange !important;
}
спасибо всем за ваше время и помощь. Высоко ценится!
Я предлагаю вам создать ID (#)
селектор локально для Div
С a
ссылки, тогда возьмите это id
имя в таблице стилей и переопределить существующее правило.
например,
#abc a{xxx:xxx;}
#abc a:active{xxx:xxx;}
надеюсь, что это помогает.
для того, чтобы делать то, что вы пытаетесь сделать, вы должны сначала понять a: наведите пришел после a: ссылка и a: посетил в определении CSS, чтобы быть эффективным. Если они не в таком порядке, то они не будут работать.
Во-вторых, вы должны понимать, что если вы, где мышление (a:active) означало цвет текущей ссылки, на которой был конечный пользователь, это неверно. (a: active) изменяет цвет при нажатии на ссылку. Вы можете проверить это, удерживая кнопку мыши на ссылке, которую вы сделали другого цвета с (A: active).
Наконец, если вы пытаетесь сделать это, используя только CSS, вы должны добавить определенный класс по текущей ссылке что конечному пользователю на. Ниже я оставил вам пример, надеюсь, что это помогает :)
Панель Навигации Выглядит Следующим Образом
- Домой!--12-->
- Россия
- Италия!--12-->
мы находимся на странице Италии для этого Пример:
/*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>
обратите внимание, что я не поставил .тег activePage в других ссылках? Это позволяет вашим исходным цветам, которые вы выбираете в css для панели навигации, по-прежнему иметь место, пока активная страница остается твердой с другим цветом.
причина, по которой это сработало, потому что я добавил !важно!--7--> в конце цвета для этого отдельного класса.
.activePage {
color: #0CF !important
}
Итак, чтобы применить это такая же техника для ваших других страниц будет просто выглядеть так:Домашняя Страница
/*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 class="activePage"><a href="http://yourdomain.com/page1.html">Home</a></li>
<li><a href="http://yourdomain.com/page2.html">Russian</a></li>
<li><a href="http://yourdomain.com/page3.html">Italy</a></li>
</ul>
</div>
Я надеюсь, что дал вам твердый ответ на ваш вопрос, потому что ненавижу, когда я смотрю по всей сети и не могу найти ответ, который я ищу.для изменения текущего цвета активной ссылки мы можем использовать код во внешнем файле css или встроенном css
.active a
{
background-color:#ff0000;
}
Если вы хотите глобально изменить цвета ссылок (или что-то еще), создайте настраиваемую загрузку:http://twitter.github.io/bootstrap/customize.html
в ответ на ваш комментарий, если вы хотите переопределить предоставленный CSS, вам нужно создать более конкретное правило. Итак, либо создайте селектор как #my-custom-container .item-109 .current .active
или добавить !important
к вашему правилу(правилам) для .item-109 .current .active
// 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');
});
$(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');
};
});
});