0

ファイル名がhrefと一致する場合、クラスをLIに自動的に追加しようとしています（たとえば、アンカーのhref属性がabout.phpに設定されていて、現在のページのファイル名がabout.phpの場合、クラスが追加されます） 。）しかし、途中でいくつかの問題が発生し、構文に少し混乱してきました...

これまでのところ私はこれを持っています...

var filename = location.pathname.substring(1)

$(document).ready(function(){
    $('a').each(function() {
        if (this.href === filename) {
            $(this).parent('li').addClass('current_page_item');
        }
    });
});

私のナビゲーションはここに示すように構成されており、ご覧のとおり、クラスが手動で設定されている場合にのみ機能します...したがって、実際のファイル名から自動化しようとしています。

私はこれを今どのように機能させるかについて本当に混乱しているので、これが誰かにとって意味があることを願っています！

貢献してくれた人に感謝します。これは非常に役立ち、jquery構文をさらに理解するのに役立ちます。実際に特定のものを選択し、jqueryで論理ステートメントを記述すると、私が使用しているPHPとは非常に異なるため、混乱します。に。

以前はマークアップを含めなかったので、マークアップは次のようになります。人々がソースコードを見て、私が何を意味しているのかを理解すると想定していました（ただし、ここに配置する必要がありました）。

<nav>
    <div class="container">
        <ul class="group" id="effects">
            <li><a href="index.php" title="View the latest news">News</a></li>
            <li><a href="about.php" title="Find out more about us">About</a></li>
            <li><a href="#" title="Find out about races">Races</a></li>
            <li><a href="#" title="Find out what tools we use">Tools</a></li>
            <li><a href="#" title="Read the Frequently Asked Questions">FAQ</a></li>
            <li><a href="contactus.php" title="Contact us">Contact Us</a></li>
        </ul>
    </div>
</nav>

ありがとう。

4

3 に答える 3

1

私はあなたがこれと同じくらい簡単にそれをすることができると思います：

$(function(){
    $('a').filter(function() {
      return (this.href == location.href);
    }).parent('li').addClass('current_page_item');
});

href属性でアンカータグをフィルタリングします。このJSFiddleで動作するようです。何らかの理由で、それが機能するためには実行を押す必要があります。

于 2012-12-31T10:48:26.057 に答える
0

私はあなたがこれを試すことができるよりもliタグがアンカータグの親であると思います-

$(this).parent().addClass('current_page_item');

代わりは：

$(this).parent('li').addClass('current_page_item');
于 2012-12-31T10:34:45.480 に答える
0

あなたがあなたの質問で提供したわずかな情報に基づいて、私は提案します（これはテストされていませんが）：

var file = document.location.href.split('/').pop();
$('li a').filter(function(){
    return this.href.indexOf(file) !== -1;
}).parent().addClass('current_page_item');

これにより、現在のページのURLの内容が取得され、/文字で分割されてから、配列の最後の要素が変数に割り当てられますfile。次に例を示します。

'http://example.com/directory/page.html'

配列に変換されます：

["http:", "", "example.com", "directory", "page.html"]

そして、その配列の最後の要素が変数に割り当てられるため、次のようにfileなります。

'page.html'

jQueryはa要素内のすべての要素を反復処理し、属性内でli文字列が見つかった場合はその要素を返し、その親要素にクラス名を追加します。page.htmlhrefa

もちろん、代わりに完全なものを使用することもできdocument.location.hrefます。これは次のようになります。

var page = document.location.href;
$('li a').filter(function(){
    return this.href == page;
}).parent().addClass('current_page_item');

これはほとんど同じように機能しますが、ファイル名がURL内にあるかどうかを確認する代わりにhref、要素のが現在のと完全に等しいことを確認しますdocument.location.href。

参照：

于 2012-12-31T10:36:55.623 に答える