Jump to content
Sign in to follow this  
shapochka

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

Recommended Posts

Добрый день!

 

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

 

prowife.ru

 

Спасибо!

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.