Как изменить CSS для до или после li, когда выбран один из li?

<li><span class="item-label">1</span><li> 
<li><span class="item-label">2</span><li> 
<li class="selected"><span class="item-label">3</span><li> 
<li><span class="item-label">4</span><li> 
<li><span class="item-label">5</span><li>

Привет всемКак изменить CSS для до или после li, когда выбран один из li?

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

Например, если я выбираю 3, мне нужно изменить CSS 2 и 4.

Спасибо ваш ответ.

источник

2013-04-10 user2150267

Есть нет: после того, как или: прежде, чем псевдо-классы, так что единственный способ выбрать для 2 или 4, чтобы последовать совет Стефана, или дать 2 и 4 классов или идентификаторы самим. – dezman

Зачем вам нужно менять css для 2 и 4 при выборе 3? –

Вы можете использовать nth-child.

Пример:

ли: п-й ребенок (3): парения ли: п-й ребенок (2), литий: п-й ребенок (4) {

цвет: красный;

}

То есть чистый CSS, вы имеете в виду выбран с JQuery, вы в принципе можете сделать то же самое.

источник

2013-04-10 03:26:46 Stephen

Что значит «в основном то же самое?» Кроме того, это не будет работать, если у ОР есть другие списки на его странице. – dezman

Это не то, о чем спрашивает ОП. Он хочет выбрать предыдущий и следующий элементы выбранного лития. – tymeJV

Использование nth-child было бы очень трудно кодировать его, он мог бы сделать это таким образом. JQuery действительно работает с nth-child, он может сделать это именно так. – Stephen

С помощью CSS я считаю, что вы можете выбрать следующий элемент списка, выполнив .select + li, но я не знаю, как отличить предыдущий только от CSS. ('Выберите + Li').

Я бы выполнить эту задачу с Mootools ...

document.getElement setStyles ({граница: '1px твердый # 000'});

document.getElement ('. Select! + Li'). SetStyles ({border: '1px solid # 000'});

Какая будет стиль предыдущего и следующего элементов списка, окружающих ваш класс .select.

источник

2013-04-10 03:32:13 arnonate

Я не могу разрешить использование jQuery в этом проекте. Проект, в котором я работаю, использует mootools, но пока не знаю никаких mootools. – user2150267

Похоже, что в mootools это было бы что-то вроде этого ... document.getElement ('. Select + li') // Выбирает следующий document.getElement ('. Select! + Li') // Выбирает предыдущий – arnonate

You можно связать с .setStyles ({ border: '1px solid # 000', ширина: 300, высота: 400 }); – arnonate

Вы можете попробовать что-то вроде этого:

$('#menu li').click(function() 
{ 
    $(this).siblings('li').removeClass('active'); 
    $(this).addClass('active'); 
});

Теперь вы создаете стиль, например:

#menu .active 
{ 
    background:rgba(0,0,0,0.2); 
    font-size:12px; 
}

Используя этот метод, только щелкнул li ссылка будет иметь class:active, которые затем будут связаны с стиль и class:active будут удалены с другой ссылки li.

Работает демо-версия: Change active class.

Надеется, что это не помогает :)

источник

2013-04-10 04:28:22

Спасибо. Я попробую. – user2150267

Как изменить CSS для до или после li, когда выбран один из li?

ответ

Смежные вопросы