1

現在のページを強調表示できるjQueryメニューを作成しようとしています。currentメソッドは、選択したクラスを追加します。

これがhtmlです：

<div class="menu_items">
<ul class="ul_items" id="navigation">
    <li><a href="index.php">1</a></li>
    <li><a href="index.php?pg=2">2</a></li>
    <li><a href="index.php?pg=3">3</a></li>
    <li><a href="index.php?pg=4">4</a></li>
    <li><a href="index.php?pg=5">5</a></li>             
</ul>
</div>

そして、私はそのようなものを作ろうとしました：

$(document).ready(function(){
    $("#navigation").find("a[href*='"+window.location.href+"']").each(function(){
            $(this).addClass("current")
    });
});

CSSコードは大きいなどの理由で、完全なコードはjsFiddleにあります

コードのJquery部分で何かが正しく定義されていないと思います。私がこれを試すとき：

var a = $("#navigation").find("a[href*='"+window.location.href+"']");
alert(a);

[オブジェクト][オブジェクト]アラートが表示されます。誰かが助けることができますか？

前もって感謝します。

4

3 に答える 3

2

jQuery メソッドは常に jQuery オブジェクトを返します。その内容を確認したい場合は、.length一致した要素の数を確認し[0]、個々の DOM ノードにアクセスしてみてください。さらに良いconsole.logことに、その中のすべてを簡単に調べることができます。

あなたの問題は、location.hrefURL全体（http://...）を返し、リンクにそれが含まれていないことです。を使用location.pathnameしてパスを取得することもできますが、現在のページを強調表示する実際の正しい方法は、サーバー側で行うことです。このような目的で JS を使用する理由はありません。

于 2012-02-05T15:18:43.867 に答える
0

マティは本当です。しかし、試すことができるのは、 href と一致する正確な値を取得するための split() メソッドです。

実際の例: http://jsfiddle.net/ylokesh/AqmHr/2/

<script>
$(document).ready(function() {

    //capture URL
    //var tempURL = window.location.href; 

    var tempURL = "http://www.websiteurl.com/index.php?pg=2"
    var urlMatch = tempURL.split('.com')[1].split('/')[1];
    var hrefVal = $("#navigation a:eq(1)").attr('href');
    $("#navigation").find("a[href='"+hrefVal+"']").html('Current Page');
});
</script>
于 2012-02-05T15:50:00.123 に答える