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 に答える