CSS меню jQuery не выбирает активную ссылку - PullRequest
Новая
       15

CSS меню jQuery не выбирает активную ссылку

0 голосов
/ 15 апреля 2010

Что с этим не так и как я могу это исправить?

У меня есть меню CSS (горизонтальное), в котором я хочу, чтобы фон и шрифт менялись при выборе одного из элементов. Я нашел другой пост, который дал мне некоторый код jQuery, чтобы помочь заставить его работать, и я подумал, что правильно его кодировал, но когда я нажимаю на элемент, чтобы изменить его класс, он добавляет класс, но фон и шрифт остаются прежними? Есть идеи?

Вот HTML: 

<ul id="menu_nav" class="buttons">
  <li>
    <a href="#" onclick="' . $menu_path . '">Item 1</a>
  </li>
  <li>
    <a href="#" onclick="' . $menu_path . '">Item 2</a>
  </li>
  <li>
    <a href="#" onclick="' . $menu_path . '">Item 3</a>
  </li>
</ul>

Вот CSS: 

ul#menu_nav
{
    float:left;
    width:790px;
    padding:0;
    margin:0;
    list-style-type:none;
    background-color:#000099;
}
ul#menu_nav a
{
    float:left;
    text-decoration:none;
    color:white;
    background-color:#000099;
    padding:0.2em 0.6em;
    border-right:1px solid #CCCCCC;

    font-family: Tahoma;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    position: relative;
    height: 21px;
    line-height:1.85em;
}
ul#menu_nav a:hover {
    background-color:#F1F4FE;
    color:#000099;
    border-top:1px solid #CCCCCC;
}
ul#menu_nav li {display:inline;}

.selected {
    background-color:#F1F4FE;
    color:#000099;
    border-top:1px solid #CCCCCC;
}

Вот jQuery: 

$(function(){
  $(".buttons li>a").click(function(){
    $(this).parent().addClass('selected'). // <li>
      siblings().removeClass('selected');
  });
});

Ответы [ 2 ]

2 голосов
/ 15 апреля 2010

Из-за наследования CSS. Правило ul#menu_nav a css всегда будет перевешивать правило .selected. Попробуйте изменить селектор 

#ul.menu_nav a.selected{

}
0 голосов
/ 15 апреля 2010

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

По сути, я просто создал два класса и поменял их местами, а затем использовал некоторые селекторы jquery для добавления / удаления классов, чтобы получить нужный эффект. 

$(function(){
              $(".menu_buttons li>a").click(function(){
                $(this).addClass('selected').removeClass('button'). // <li>
                  parents().siblings().children("a").removeClass('selected').addClass('button');
              });
            });

Окончательный CSS выглядит так: 

ul#menu_nav
{
    float:left;
    width:790px;
    padding:0;
    margin:0;
    list-style-type:none;
    background-color:#000099;
}
ul#menu_nav a.button
{
    float:left;
    text-decoration:none;
    color:white;
    background-color:#000099;
    padding:0.2em 0.6em;
    border-right:1px solid #CCCCCC;

    font-family: Tahoma;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    position: relative;
    height: 21px;
    line-height:1.85em;
}
ul#menu_nav a:hover {
    background-color:#F1F4FE;
    color:#000099;
    border-top:1px solid #CCCCCC;
}
ul#menu_nav li {display:inline;}

.selected {
    background-color:#F1F4FE;
    color:#000099;
    border-top:1px solid #CCCCCC;

    float:left;
    text-decoration:none;
    padding:0.2em 0.6em;
    border-right:1px solid #CCCCCC;

    font-family: Tahoma;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    position: relative;
    height: 21px;
    line-height:1.85em;
}
...