Изменение класса CSS в jQuery

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

$(".selector-box").click(function () {
    $('.selector-box').removeClass("selected");
    $(this).addClass("selected");
});

Обновлен JsFiddle

Проблема с тем, что вы не можете сначала выбрать первый, заключается в том, что событие click не связано с ним, поскольку вы применяете его только к элементам <div> с .selector-box класса .selector-box. Кроме того, CSS кажется прекрасным, проверьте скрипку: http://jsfiddle.net/9FZcz/2/

Уже есть ответы, которые предлагают решения, требующие некоторого рефакторинга, такие как добавление selected класса к выбранным элементам, а не отдельное selector-box-selected и selector-box классы.

Хотя я думаю, что вы должны выполнить рефакторинг, так как он улучшает общий дизайн и приводит к уменьшению дублирования кода CSS, вот решение без рефакторинга кода.

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

DEMO

var selectedBox = $('.selector-box-selected').get();

$('.selector-box').add(selectedBox).click(function () {

    if (selectedBox === this) return;

    selectedBox = $([this, selectedBox])
        .toggleClass('selector-box-selected')
        .toggleClass('selector-box')
        .get(0);
});

Я изменяю свой код abit

<div name="ss" class="selector-box-selected"></div>
<div name="ss" class="selector-box"></div>
<div name="ss" class="selector-box"></div>
<div name="ss" class="selector-box"></div>

$("div[name=ss]").click(function () {
    $("div[name=ss]").removeClass("selector-box-selected").addClass("selector-box");
    $(this).removeClass("selector-box").addClass("selector-box-selected");
});

не обращайте внимания на имя SS, измените его на то, что вы хотите: D