Перейти к содержанию
shapochka

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

Рекомендуемые сообщения

Добрый день!

 

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

 

prowife.ru

 

Спасибо!

post-674214-0-99408400-1409728787_thumb.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

вставьте в 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>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

У меня получилось, спасибо Вам! Только в вашем коде пришлось это #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;             
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.