3

ユーザーが各ページにいるときに、ナビゲーションの各ボタンがアクティブな状態になるように、いくつかのjQueryスクリプトを試しました。

私のナビゲーションは次のようになります: http://jsfiddle.net/EWhS3/

また

<div id="wrapper">
        <div id="header">
            <img src="img/logo.png">
        </div>
        <!--header END-->
        <div id="nav">
            <ul>        
                <li><a href="index.php" class="select">Profil</a></li>
                <li><a href="referencer.php" class="pushlinks" class="select">Referencer</a></li>
                <li><a href="projekter.php" class="pushlinks" class="select">Projekter</a></li>
                <li><a href="galleri.php" class="pushlinks" class="select">Galleri</a></li>
                <li><a href="blog.php" class="pushlinks" class="select">Blog</a></li>
                <li><a href="#" class="pushlogin" class="select">Login</a></li>
            </ul>
        </div>
        <!--nav END-->
        <div id="content">
        </div>
    </div>

ユーザーが各ページにアクセスしたときに、ホバー効果がアクティブのままになるようにします。

誰かが私にこれについてのアイデアを与えてくれることを本当に願っています. いろいろ試しましたが、うまくいきませんでした:(

前もって感謝します ;）

4

3 に答える 3

11

簡単にできます

<script type="text/javascript">
  var loc = window.location.pathname;

   $('#nav').find('a').each(function() {
     $(this).toggleClass('active', $(this).attr('href') == loc);
  });
</script>

CSS:

#nav a.active{color: red}
于 2014-04-23T18:49:12.167 に答える
2

試す

jQuery(function () {
    var page = location.pathname.split('/').pop();
    alert(page)
    $('#nav li a[href="' + page + '"]').addClass('active')
})

また、hover & activeルールを次のように変更します

#nav ul li a:hover, #nav ul li a.active {
    ...
}

デモ:フィドル

于 2013-11-13T00:52:23.363 に答える