2

次のメインメニューがあります。

<div id="smoothmenu" class="ddsmoothmenu">
    <ul id="nav">
        <li><a href="/Home">Home</a></li>
        <li><a href="/About">About</a> </li>
        <li><a href="/Features">Features</a></li>
        <li><a href="/Contact">Contact</a></li>
        <li><a href="/Support">Support</a></li>
    </ul>
 </div>

リンクがクリックされたときに「選択された」cssクラスをリンクに追加し、.cssクラス内の他のすべてのリンクからcssクラスを削除したいと思います。これは、ユーザーがクリックして開いたページをマークするためのものです。

おそらくこれは、ページが読み込まれたときにjqueryが現在のパスを読み取り、対応するメニューリンクタグにcssクラスを追加する方法で行うことができますか?

ありがとうございました

4

3 に答える 3

2

CSS トリック スニペット

次のようなナビゲーションがあるとします。

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/clients/">Clients</a></li>
        <li><a href="/contact/">Contact Us</a></li>
    </ul>
</nav>

そして、あなたは次の URL にいます:

http://yoursite.com/about/team/

また、About リンクに「active」のクラスを取得して、アクティブなナビゲーションであることを視覚的に示すことができるようにします。

$(function() {
  $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

基本的に、これは nav の href 属性が「/about」で始まるリンク (またはセカンダリ ディレクトリが何であれ) と一致します。

参考文献...

于 2013-10-09T12:46:54.937 に答える
1

パーティーには少し遅れましたが、サイズを試してみてください...

各アンカー要素の href 属性を、上記のナビゲーション構造の現在のウィンドウ位置と比較します。

$('.ddsmoothmenu > ul#nav > li').each(function() {
    var $this = $(this),
        $link = $this.children('a'),
        path = $link.attr('href');

    if (path == document.location.pathname) {
        $this.addClass('selected');
    }
});

JSFiddle での動作を確認できます: http://jsfiddle.net/LdQft/

于 2013-10-09T13:04:30.267 に答える