Question

<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>

大家好

我想问一下，如果选择了一个li，我可以在li之前或之后更改CSS。

例如，如果我选择3，我需要更改2和4的CSS。

谢谢你的回答。

Answer 1

您可以使用nth-child。

前：

li：nth-child（3）：hover li：nth-child（2），li：nth-child（4）{

颜色：红;

}

这是纯粹的CSS，你的意思是用jquery选择，你基本上可以做同样的事情。

Answer 2

使用CSS，我相信你可以通过选择.select + li来选择下一个列表项，但是我不知道用CSS选择上一个列表的好方法。

我会用mooTools来实现这个目标......

document.getElement（'。select + li'）。setStyles（{border：'1px solid＃000'}）;

document.getElement（'。select！+ li'）。setStyles（{border：'1px solid＃000'}）;

将为.select类的前一个和下一个列表项设置样式。

Answer 3

您可以尝试这样的事情：

$('#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。

希望这会有所帮助：）

当选择其中一个li时，如何更改li之前或之后的CSS？

3 个答案: