使用菜单中的所有上一项突出显示当前项目

Question

这里我附上了我的菜单栏。我的网页是完全滚动页面移位类型（即，包含六个页面的单个页面，可以在单击菜单项上滚动）。当我点击我的菜单项时，我的菜单项的亮点可能就像在附加的图像中一样。现在我使用单个菜单项突出显示当前页面，但是我需要的是当我点击我的第四个菜单然后当前菜单项以及所有以前的菜单项也需要突出显示。如何进行此操作？

Answer 1

假设这个标记：

<span class="menuitem">Howdy</span>
<span class="menuitem">Howdy</span>
<span class="menuitem">Howdy</span>
<span class="menuitem">Howdy</span>
<span class="menuitem">Howdy</span>

这个CSS：

.menuitem{border-bottom: 4px solid #888888;}
.menuActive{border-bottom: 4px solid blue;}

此代码：

$('.menuitem').click(function(){
    $('.menuitem').removeClass('menuActive');
    $(this).prevAll().andSelf().addClass('menuActive');
});

这个小提琴：http://jsfiddle.net/vE6yW/

编辑：重新发布到jQuery版本1.8和1.9 +。

在jQuery 1.8版中，创建了addBack()方法，在版本1.9中删除了andSelf()。对于jQuery 1.8和转发，请使用：

$('.menuitem').click(function(){
    $('.menuitem').removeClass('menuActive');
    $(this).prevAll().addBack().addClass('menuActive');
});

在此代码中，效果将是相同的。 addBack()还强调了一个选择器，以便在需要时减少添加回选择组的元素。

Answer 2

我要采取刺，并假设这接近你想要的：http://jsfiddle.net/cxndW/

我使用实线边框来实现效果，但您应该可以使用背景图像或边框图像。

HTML

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
</ul>​

CSS（请注意，它是完全通用的，您需要使用类或ID来使其更具体）：

ul{
    overflow:hidden;
    margin:1em;
    float:left;
}
li{
    float:left;
    padding:.1em 0;
    border-bottom:solid 5px #ccc; /* base state, grey */
    cursor:pointer;
}
li + li{
    padding-left:1em;
}
ul:hover li,                  /* all list items when the ul is hovered */
ul.active li,                 /* or all list items when the ul is "active" */
ul.active:hover li{           /* an override for below */
    border-bottom-color:#34f; /* become blue */
}
li:hover ~ li,                /* all list items after the hovered list item */
ul li.active ~ li,            /* all list items after the active list item */
ul.active:hover li:hover ~ li{ /* an override for when the list is active and hovered */
    border-bottom:solid 5px #ccc; /* back to grey */
}

在演示中还有一些简单的jQuery，它在点击时将li类设置为活动状态（清除彼此活动的li类）。