Изменение класса css для проблем с элементами li

Question

У меня следующая структура:

<ul id='myTopicsList'>

<li> 
<a><span> First Element </span></a>
</li>

.....

</ul>

При первой загрузке страницы будет выбрана первая ли, выделив ее синим цветом фона.

В следующий раз, когда пользовательщелкает другой элемент в списке, он должен изменить цвет на синий, а остальные должны иметь белый фон.

Я использую этот скрипт:

function GetMyTopic(catID) {
 $('#myTopicsList li').each(function () {

        if ($(this).attr('id').indexOf(catID) > 0) {
            $(this).addClass('SideBarBoxliSelected');
        }
        else {
            $(this).addClass('SideBarBoxli');
        }
    });
}

здесь css:

.SideBarBoxli{margin-bottom:4px; background-color:#fafafa; height:22px; }
.SideBarBoxli:hover {background-color:#E3ECF8; cursor:pointer; }
.SideBarBoxliSelected{margin-bottom:4px; background-color:#6388BF; height:22px; }

Когда я щелкаю и присваиваю SideBarBoxliSelected класс нажатым li, фон остается прежним.

Есть предложения?

Answer 1

Вот HTML-код, который я бы использовал:

<ul id="myTopicsList">
    <li class="SideBarBoxli SideBarBoxliSelected">first</li>
    <li class="SideBarBoxli">sec</li>
    <li class="SideBarBoxli">three</li>
    <li class="SideBarBoxli">four</li>
    <li class="SideBarBoxli">fiffff</li>
</ul>

Вот код, который я бы использовал:

$(document).ready(function() {
    $('ul#myTopicsList li').click(function() {
        $('li.SideBarBoxliSelected').removeClass('SideBarBoxliSelected');
        $(this).addClass('SideBarBoxliSelected');
    });
});

Функция .click установит его так, чтобы каждый раз, когда кто-либо нажимал на любой из элементов li, он вызывал анонимную функцию, которая удаляет класс SideBarBoxliSelected из текущего выбранного и добавляет его к выбранному элементу.

Редактировать

---

Вы также можете добавить следующее, чтобы убедиться, что первый элемент имеет класс SideBarBoxliSelected при загрузке страницы:

$('ul#myTopicsList li:first').addClass('SideBarBoxliSelected');

Вышеуказанная строка будет идти на линии до вызова $('ul#myTopicsList li').click.

---

Answer 2

Попробуйте это.

$(document).ready(function() {
    $('#myTopicsList li').click( function() {
        $('#myTopicsList li').removeClass('SideBarBoxliSelected');
        $(this).addClass('SideBarBoxliSelected');
    });
});

Answer 3

Это самый простой способ сделать это.

HTML

<ul id="myTopicsList">
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ul>

CSS

#myTopicsList li {background:#fafafa;margin-bottom:4px;height:22px;}
#myTopicsList li:hover {background:#E3ECF8;cursor:pointer;}
#myTopicsList li.active {background:#6388BF;}

jQuery

$(document).ready(function(){
    $('#myTopicsList li').click(function(e){
        // remove all active classes
        $('#myTopicsList li').removeClass('active');
        // add active class to clicked item
        $(this).addClass('active');
    });
    // click on the first item on page load
    $('#myTopicsList li').eq(0).click();
});

Answer 4

Я думаю, вам нужно добавить точку перед "SideBarBoxliSelected", чтобы .SideBarBoxliSelected

Answer 5

Я не уверен, что использование функции indexOf - лучший способ сравнить id с переданной переменной.Может быть, попробуйте использовать:

if ($(this).attr('id') == catID)

вместо?

Answer 6

Когда вызывается GetMyTopic? Я бы предложил использовать плагин Firebug для Firefox для отладки вашего JavaScript. Убедитесь, что правильный класс CSS применяется к каждому LI, участвующему в вашем тестовом примере. Если нет, вы можете выяснить, почему, пройдя по сценарию в отладчике. Вы также можете проверить CSS в firebug, чтобы увидеть, какие стили применяются.

Кроме того, в вашем примере кода вы используете атрибут 'id' для идентификации элементов списка, но у вас нет атрибута id, определенного в вашем HTML или скрипте. Может быть, что-то упущено?