Класс не перезаписывается с помощью addClass - PullRequest
Новая
       2

Класс не перезаписывается с помощью addClass

1 голос
/ 14 июня 2010

Я использую addClass jQuery, чтобы добавить класс на вкладку, поэтому при нажатии он изменит класс, поэтому очевидно, что вкладка подсвечивается.

Мой HTML 

<div id="mainNav">
            <ul>
                <li id="LinktheBand" onclick="nav('theBand')">The Band</li>
                <li id="linkTheMusic" onclick="nav('theMusic')">The Music</li>

Мой CSS 

#mainNav li {
    float:left;
    margin-right:5px;
    color:white;
    font-family:Tahoma;
    font-weight:bold;
    padding: 10px 8px 0px 8px;
    background:url('../images/transparent-65.png');
    height:40px;
    height: 25px !important;
    border:1px solid #000;
}

#mainNav li:hover {
    float:left;
    margin-right:5px;
    color:white;
    font-family:Tahoma;
    font-weight:bold;
    padding: 10px 8px 0px 8px;
    background: #660000;
    height:40px;
    height: 25px !important;
    border:1px solid #660000;
}

.mainNavSelected {
    float:left;
    margin-right:5px;
    color:white;
    font-family:Tahoma;
    font-weight:bold;
    padding: 10px 8px 0px 8px;
    background: #660000;
    height:40px;
    height: 25px !important;
    border:1px solid #660000;
}

Мой Javascript 

function nav(a) {
$('#'+a).show();
$('#Link'+a).addClass('mainNavSelected');
}

Это работает правильно, я проверяю firebug и вижу, что добавлен class = "mainNavSelected", но элемент списка не принимает никаких свойств нового класса. Firebug перечисляет все элементы класса для mainNavSelected, но вычеркивает их все. Чего мне не хватает, чтобы заменить класс этого элемента?

Ответы [ 4 ]

2 голосов
/ 14 июня 2010

Я думаю, что это как-то связано с каскадом CSS.Стили идентификатора переопределяют стили в классах, даже если они указаны позже.Попробуйте вставить ul li a.mainNavSelected в CSS, и оно должно работать.

Также обратите внимание, что регистр идентификатора несовместим между двумя ссылками.

1 голос
/ 14 июня 2010 
.mainNavSelected { 
    float:left; 
    margin-right:5px; 
    color:white; 
    font-family:Tahoma; 
    font-weight:bold; 
    padding: 10px 8px 0px 8px; 
    background: #660000 !important;
    height:40px; 
    height: 25px !important; 
    border:1px solid #660000 !important; 
}

Это должно исправить проблему.Вы видите, что ваш CSS-селектор для #mainNav li более специфичен, чем .mainNavSelected.Из-за этого #mainNav li всегда будет показывать свой стиль до .mainNavSelected.

1 голос
/ 14 июня 2010

Я считаю, что свойства, указанные в ID, имеют приоритет над свойствами, указанными в классе, поэтому вы должны изменить свойства, указанные в ID, на класс, затем удалить его и добавить новый класс.

1 голос
/ 14 июня 2010

Firebug показывает вам, откуда берется каждое свойство CSS.Если это происходит из нескольких мест, то те, которые не действуют, вычеркиваются.

Я подозреваю, что "#mainNav li" просто обладает большей специфичностью, чем имя класса.Попробуйте изменить селектор для класса на «#mainNav li.mainNavSelected»

...