0

我有一个链接栏固定在屏幕的右侧。当用户滚动时，项目符号点会根据用户滚动到的部分而增长（充当帮助用户向上/向下导航页面的锚点。

我在每个项目符号旁边都有标签，显示每个链接/滚动点的描述。我只想在突出显示相应的链接/要点时显示每个跨度标签（当在“li”元素上设置 class="selected" 时）。

如何检测 li 元素上的 class="selected" 并在 class="selected" 存在时显示相应 span 标签的内容？

<div id="sidemenu">
<ul>
    <li id="welcomeLi" class="selected"><table><tr><td><span>Welcome</span></td><td><a href="#home">&bull;</a></td></tr></table></li>
    <li id="mantraLi"><table><tr><td><span>Our mantra</span></td><td><a href="#mantra">&bull;</a></td></tr></table></li>
    <li id="softwareLi"><table><tr><td><span>Our software</span></td><td><a href="#software">&bull;</a></td></tr></table></li>
    <li id="involvedLi"><table><tr><td><span>Get involved</span></td><td><a href="#involved">&bull;</a></td></tr></table></li>
    <li id="contactLi"><table><tr><td><span>Contact us</span></td><td><a href="#contact">&bull;</a></td></tr></table></li>
</ul>

4

2 回答 2

1

如果我理解正确，类会随着用户向下/向上滚动而改变？

您可以检测到用户何时停止滚动并隐藏所有 li 元素并显示所选类的特定内容。

编辑

演示

$('#sidemenu ul li:not(.selected) span').hide();

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        $('#sidemenu ul li:not(.selected) span').hide();
        $('#sidemenu ul li.selected span').show();
    }, 250));
});
于 2013-10-29T13:41:51.473 回答
0

你可以试试这个

 $("#sidemenu ul li").each(function(n,element){
    if ( $(element).hasClass('slected') ) 
    {
    //do your stuff
    }
 });
于 2013-10-29T13:35:32.460 回答