0

私は周りを読んでいて、現在のページのナビゲーションバーリンクの背景色を変更するために CSS のみを推奨している人がいますが、CSS は静的であり.currentlink、リンクのクラスを追加/削除できないため、それがどのように可能かわかりませんか? だから今、JS / jqueryを使ってクリックに基づいてクラスを追加/削除しようとしていますが、サイトが更新され、クリックしても何も保存されないため、追加/削除したクラスは何もしません。誰かが私を正しい方向に導くことができますか？例: 提供した HTML の最後のリンクをクリックすると、そのサイトに移動するだけで、すべてが新しいサイトに更新されるため、背景は変わりません。

HTML

    <nav class="clearfix">

        <a href="#">home</a> 
        <a href="#">about us</a> 
        <a href="#">tour</a>
        <a href="index.html">flickr search</a>

    <div class="rightnav">
        <a href="#">Sign Up</a>
        <a href="#">Log In</a>
    </div>

    </nav>

CSS

.greybackground {
background: #E6E6E6;
}

JS

$('nav a').on('click', function(){
    $('nav a').removeClass('greybackground');
    $(this).addClass('greybackground');
});
4

3 に答える 3

0

これを実現する最も簡単な方法は、次の要素を特定することです。

  1. すべてのページに存在する
  2. マークアップを追加できます

たとえば、コンテンツ全体の div です。

以下を div に追加すると:

<div id="content" data-currentpage="about">

これにより、ページが一意に識別されます。

メニュー項目ごとに、一致するクラスを追加します。

<li><a href="#" class="link" class="home">Home</a></li>
<li><a href="#" class="link" class="products">Products</a></li>
<li><a href="#" class="link" class="about">About us</a></li>
<li><a href="#" class="link" class="contact">Contact</a></li>

したがって、準備完了ページ ( jQuery(document).ready(function(){...) で次のコードを実行します。

// -- Find the pages 'data' tag --
var currentPage = jQuery('#content').data('currentPage');
// -- Add a dot to turn it into a class identifier --
currentPage = '.' + currentPage;
// -- Add a background class to to the menu item with that class --
jQuery(currentPage).addClass('greybackground');

これにより、(data-currentpage タグを介して) 各ページが対応するメニュー項目に「一致」し、バックグラウンド クラスがそのメニュー項目に追加されます。

于 2017-10-29T08:58:27.613 に答える