1

関連するメニュー項目を現在の URL で強調表示したい。

ここにhtmlがあります

       <ul class="nav">
          <li>
            <a href="/ratings">Rate</a>
          </li>
          <li class="">
            <a href="/ratings/list">All Pics</a>
          </li>
          <li>
            <a href="/ratings/new">Upload Your Own</a>
          </li>
        </ul>

そして単純なjquery：

$(function () {
    var active = 'active',
        $lastMatch,
        s = window.location.pathname;

    $('.nav a').each(function (index, item) {
        if (s.indexOf($(this).attr("href")) !== -1) {
            $lastMatch = $(this).closest('li');
        }
    });

    if ($lastMatch.length){
        $lastMatch.addClass(active);
    }
});

動作します。 しかし0.0.0.0:3000/ratings/list/1、異なるURL に移動すると`0.0.0.0:3000/ratings/list、奇妙なバグが発生し、「アクティブ」のままになります。

私は火のバグでデバッグしようとしましたが、liがactiveクラスを取得していることがわかりましたが、他の何かによってキャンセルされ、それが何であるかわかりません。

4

1 に答える 1

0

次の行を変更してみてください。

if (s.indexOf($(this).attr("href")) !== -1) {

これについて：

if (s.indexOf($(this).attr("href"), s.length - $(this).attr("href").length) !== -1) {

したがって、両方の文字列が文字列の最後で一致するかどうかを比較するには、あなたが行っていたように任意の部分ではなく. このようにして、あなたが抱えているコーナーケースを避けることができます。

于 2012-12-07T19:21:51.447 に答える