Изменение класса нескольких элементов сразу

Question

Я стою перед лесом. Можете ли вы помочь мне найти дерево?

В настоящее время я генерации списка с PHP

echo '<div>'; 
echo ' <ul>'; 
foreach ($myArray as $key => $value): 
    echo '<li>'. $value . '</li>'; 
endforeach; 
echo ' </ul>'; 
echo '</div>'; 

Массив содержит ограниченное количество элементов, которые могут изменяться.

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

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

Я хотел был бы иметь возможность сделать это используя только CSS.

Чтобы быть названным, при нажатии на элемент списка я планирую показать/скрыть другие элементы div, где я планирую использовать jQuery.

Answer 1

Попробуйте .addClass() .removeClass() и .eq():

$(function(){ 
    $('div ul li').eq(1).addClass('active'); 
    $('div ul li').click(function(){ 
     $(this).siblings().removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

.eq() Как это 0 индексируется так .eq(1) будет выбран второй Ли на странице загрузки.

Answer 2

$('li').on('click', function() { 
    $('li.highlight').removClass('highlight'); // first un-highlight all lis 
    $(this).addClass('highlight'); // then highlight only clicked li 
}); 

Чтобы установить первый элемент как highlight при загрузке страницы, вы можете сделать это в PHP/JQuery также.

Если вы хотите сделать в JQuery попробуйте:

$(document).ready(function() { 
    $('div > ul > li:first').addClass('highlight'); // set first item 
               // highlight at page load 
    $('li').on('click', function() { 
     $('li.highlight').removClass('highlight'); // first un-highlight all lis 
     $(this).addClass('highlight'); // then highlight only clicked li 
    }); 
}); 

Answer 3

Вам, вероятно, необходимо добавить название класса в li, чтобы дать вам удобный селектор. В приведенном ниже примере для этой цели я использую some_class. Я также предполагаю, что вы хотите использовать класс для указания выбранного элемента. В этом примере я использовал selected как имя класса для этого.

$('li.some_class').click(function() { 
    $('li.some_class').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

Answer 4

спасибо всем за ваш быстрый ответ.

я, наконец, смешать ваши ответы, чтобы он работал на меня

$(document).ready(function() 
{ 
    $('div#myclass > ul.myid > li:first').addClass('current'); // set first item 

    $('div#myclass > ul.myid > li').click(function() 
    { 
     $(this).siblings().removeClass('current'); 
     $(this).addClass('current'); 
    }); 
}); 

MyClass и MyID я добавил различать другие элементы списка.

@thecodeparadox: обновление при нажатии на другой элемент не было выполнено с вашим предложением. @jai: первоначальный набор не был выполнен с вашим предложением.

Но с окончательной смесью он работает на 100%, как мне нужно.

Еще раз спасибо.

Wolfgang