[РЕШЕНО] Выделенная кнопка на своей странице.

[shapochka]

Добрый день!

 

Подскажите, пожалуйста, как для кнопки Контакты задать тот же стиль после нажатия на нее, что и у других элементов меню? Белый фон+черный шрифт.

 

prowife.ru

 

Спасибо!

[AlexFisher]

отслеживать страницу, на которой находится пользователь, и подставлять стиль, например, с помощью js

страницу можно хоть по тайтлу отслеживать.

[shapochka]

Спасибо за ответ. А можно это как-то реализовать через обычные стили? например, псевдокласс :active ? http://htmlbook.ru/css/active

Я думал, что это должно работать, но у меня не получается.

[AlexFisher]

Так это оно и есть.

Но кнопка именно на странице контактов должна знать, что она на странице контактов. Вернее, страница должна знать, что нужно-бы кнопке присвоить что псевдокласс, что обычный, да хоть id - не принципиально.

[shapochka]

Подскажите, пожалуйста, как это сделать по аналогии с другими элементами меню? Ведь там все работает. После нажатия, например, на "Уборочный инвентарь", применяется необходимый стиль.

[AlexFisher]

вставьте в footer.tpl вот это и забудьте

<script type="text/javascript">
$(document).ready(function(){
var actualurl=document.location.href;
$.each($("#menu > ul > li > a"),function(){
if(this.href==actualurl){$(this).addClass('active');};
});
});
</script>

[shapochka]

У меня получилось, спасибо Вам! Только в вашем коде пришлось это #menu > ul > li > a заменить на это #header #contacts, так как для кнопки "Контакты" у меня такой стиль:

#header #contacts {
    position: absolute;
    height: 20px;
    width: 66px;
    left: 890px;
    top: 147px;
    border: 1px solid #FFFFFF;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    padding-top: 4px;
    padding-left: 12px;
    font-size: 10.5px; 
    color: #FFFFFF;
    text-decoration: none;
    text-shadow: none;
    line-height: 14px;            
}
#header #contacts:hover {
    background: #FFFFFF;
    color: #1774BF;             
}
#header #contacts.active {
    background: #FFFFFF;
    color: #000000;             
}