Javascript 在菜单中突出显示当前项和所有上一项

---

这里我附上了我的菜单栏。我的网页是完全滚动条页面转换类型（即，一个包含六个页面的页面，单击菜单项即可滚动）。当我单击菜单项时，菜单项的突出显示可能与所附图像中的一样。但现在我仍使用单个菜单项突出显示，与当前页面相同，但这里我需要的是，当我单击第四个菜单时，当前菜单项和所有以前的菜单项也需要突出显示。我如何进行此操作？

此标记的假设：

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

此代码：

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

这把小提琴：

编辑：与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（）

还实现了一个选择器，以便在需要时减少添加回选择组的元素。

我使用了一个坚实的边界来实现效果，但你应该能够做到这一点与背景图像或边界图像

HTML

---

在演示中还有一点微不足道的jQuery，它在单击时将li类设置为活动（清除彼此的活动li类）

可爱的图片，但我们能看到一些代码吗？一个活生生的例子怎么样？来吧，伙计们，当我们读心术的时候，我上面的人是对的。使用@Tadeck-better CSS，我认为这很容易清理。另外，通常我会要求你展示你付出了多少努力，但这个问题很有趣，我可以试着去做。

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

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

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 */
}