Форум PHP программистов > Не работает color при активном пункте меню

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Не работает color при активном пункте меню

Серега187

15.11.2013 - 12:21

Ребята почему не работает колор при активном пункте меню? Вот код:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

 <script>
   $(function() { 
    $("#menu a").each(function(){ 
        if(this.href.replace(/#.*$/, '') == location.href.replace(/#.*$/, '')) 
            $(this).parent().addClass('onTop'); 
        else 
            $(this).parent().removeClass('onTop'); 
    }) 
})
</script>

CSS:

.onTop{
color:#000;
text-decoration:underline;
}

Подчеркивание работает, а цвет нет. И если косяк в коде, напишите его полностью пожалуйста, а то я не шарю).

redreem

15.11.2013 - 12:23

напиши так: color:#000 !important;

Серега187

15.11.2013 - 12:27

Цитата (redreem @ 15.11.2013 - 12:23)

напиши так: color:#000 !important;

Не, не работает. background-color тоже работает, а color не работает.

redreem

15.11.2013 - 12:44

ну так тогда попробуй:

вместо

$(this).parent().addClass('onTop'); 
$(this).parent().removeClass('onTop');

напиши

$(this).parent().addClass('onTop').css({color:'#000'}); 
$(this).parent().removeClass('onTop').css({color:'#f00'});

полюбому тут каскадность css замешана. без полного листинга твоей css-ки и страницы - сложно сказать где идет перебив цвета. дык или сам в браузере в отладчике глянь, какой стиль у тебя формирует цвет для активной ссылки.

Серега187

15.11.2013 - 14:27

Все перепробовал, ни черта не работает color. Создал примитивную страницу, задал минимум стилей, вот css код, все также без изменений.

#menu ul{
list-style:none;
}
#menu li{
text-transform:uppercase;
font-size:15px;
}
#menu ul li a{
color:#aaaaaa;
text-decoration:none;
}
#menu a:hover{
color:#cccc66;
}
.onTop{
color:#000000;
text-decoration:underline;
}

А может проблема в этом?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

redreem

15.11.2013 - 15:15

ну а где страница-то?

Серега187

15.11.2013 - 17:00

Вот весь набор:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
   $(function() { 
    $("#menu ul li a").each(function(){ 
        if(this.href.replace(/#.*$/, '') == location.href.replace(/#.*$/, '')) 
            $(this).parent().addClass('onTop'); 
        else 
            $(this).parent().removeClass('onTop'); 
    }) 
})
</script> 
<title>bbbbb</title>
</head>
<body>
		<div id="menu">
			<ul>				
				<li><a href="index.html">Меню1</a></li>
				<li><a href="menu2.html">Меню2</a></li>
				<li><a href="menu3.html">Меню3</a></li>
				<li><a href="menu4.html">Меню4</a></li>
			</ul>
		</div>
</body>
</html>

css:

#menu ul{
list-style:none;
}
#menu li{
text-transform:uppercase;
font-size:15px;
}
#menu ul li a{
color:#aaaaaa;
text-decoration:none;
}
#menu a:hover{
color:#cccc66;
}
.onTop{
color:#000000;
text-decoration:underline;
}

Быстрый ответ:

Здесь расположена полная версия этой страницы.