javascript - 突出显示当前项目和菜单中的所有先前项目

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 类）。