0

私のウェブサイトには、いくつかの異なるナビゲーション項目が含まれた固定ヘッダーがあり、クリックすると下にスクロールしてページ上のそのセクションを見つけることができます。ビューが対応するセクションにあるときにナビゲーション項目の色が変わるように設定する方法を考えていました。つまり、視聴者がセクション「x」にいる場合、ナビゲーション バーの「x」の色が変わります。

更新：使用しているナビゲーションバーのコードはこちら

<div class = 'nav-container'>
    <nav>
        <div id = 'nav-items-container'>
            <ul class='nav-items'>
                <li class='nav-item'><a href='#what'>what</a></li>
                <li class='nav-item'><a href='#how'>how</a></li>
                <li class='nav-item'><a href='#why'>why</a></li>
                <li class='nav-item'><a href='#who'>who</a></li>
                <li class='nav-item'><a href='#where'>where</a></li>
            </ul>
        </div>
    </nav>
</div>

いくつかのCSS

.nav-container{
   background-color:black;
   height:50px;
   width:410px;
   font-size: 120%;
   position:absolute;
}



a:link{
    color:white;
}

a:visited{
    color:#58ACFA;
}
#nav-items-container ul li{
    display:inline;
}

#nav-items-container ul li a{
    padding: 20px;
    text-decoration:none;
}
#nav-items-container ul{
    margin:0;
    padding:0;
    list-style-type: none;
    text-align: center;
    padding-top:15px;
}
4

3 に答える 3

1

jquery を使用できる場合は、次のようなことができます。

 <script type="text/javascript">
    $(function() {
        var sections = [],
            anchors = $('#nav-items-container a[href^="#"]'),  // anchor links with hash tags
            docHeight = $(document).height(),
            currentOffset,
            setNavActive;

        // handler to update the class  
        setNavActive = function(hash){
            anchors.removeClass('current-section');
            anchors.filter('a[href="' + hash + '"]').addClass('current-section');
        };
        
        // building our hash/start/end position map 
        $.each(anchors, function(i, item) {
            currentOffset = $(item.hash).offset().top;
            if (i > 0) {
                sections[i-1].end = currentOffset;
            }
            
            sections[i] = { 
                            hash: item.hash, 
                            start: (i == 0 ? 0 : currentOffset),
                            end: docHeight
                          };
        });
        
        // on scroll event, check which map fits, 
        // find the hash and set the class          
        $(document).scroll(function() {
            currentOffset = $(document).scrollTop();
            for (var i = 0; i < sections.length; i++) {
                if (sections[i].start <= currentOffset && sections[i].end > currentOffset) {
                    setNavActive(sections[i].hash);
                }
            }
        });
    });
</script>

新しいスタイルを追加しましたが、入れ子にすることもできます。

.current-section {background:pink; }

jsフィドル

http://jsfiddle.net/fstreamz/krb6Q/3/

于 2013-07-15T03:12:32.167 に答える
0

CSS以下のように別の宣言を追加activeし、現在のページにスタイルを適用します。

#nav-items-container ul li.active a {
    color:red;
}

このように上記のスタイルを適用します...

<li class='nav-item active'><a href='#what'>what</a></li>

jsFiddle デモ

于 2013-07-15T02:40:14.303 に答える
0

ここには、最良の回答を与えるのに十分な情報がありません。私は動作するものを与えることができます。

ヘッダーを次のように変更します。

<li class='nav-item' id = "nav_what"><a href='#what'>what</a></li>
<li class='nav-item' id = "nav_how"><a href='#how'>how</a></li>
<li class='nav-item' id = "nav_why"><a href='#why'>why</a></li>
<li class='nav-item' id = "nav_who"><a href='#who'>who</a></li>
<li class='nav-item' id = "nav_where"><a href='#where'>where</a></li>

次に、各ページの本文に入れます

<script>
document.getElementById('nav_what').style.backgroundColor = "gray";
</script>

各ページで正しい ID を使用して切り替える必要があります。ヘッダーが外部からロードされていない場合、従来はインライン スタイルを使用して手動で実行されていました。

于 2013-07-15T02:26:25.367 に答える