2

Web ページのパス名を取得する関数を作成しました。それがメニュー項目の ID と一致する場合は、div タグに css プロパティを追加し、div を現在のページとして表示します。http://kwp.host22.comでテストしている Web サイトを次に示します。変数が正しいことを確認するためにアラートを使用しています。ここに私のhtmlがあります。

<div id="navigation">
        <a href="index.html"><div class="navblocks" id="index.html"><p>Home</p></div></a>
        <a href="cleaning.html"><div class="navblocks" id="cleaning.html"><p>Cleaning</p></div></a>
        <a href="contact.html"><div class="navblocks" id="contact.html"><p>Contact Us</p></div></a>
    </div>

そして、ここに私のjqueryがあります：

var path = window.location.pathname;
        if(path === "/")
            {
            var pathname = path.replace("/","index.html");
            }
        else
            {
            pathname = path.replace("/","");
            }
        alert("pathname = " + pathname);
        var id = "#" + pathname;
        alert("id = " + id);
        $('a').each(function() 
            {
            var href = $(this).attr("href");
            alert("href = " + href);
            if (href === pathname)
                {
                $(id).css('box-shadow','0px 0px 20px inset');
                }

しかし、divタグにボックスシャドウを適用していません。

まだjqueryを学んでいます。ありがとう

4

3 に答える 3

3

問題は、jQuery が ID "#index.html" を "ID index およびクラス html を持つ要素" として解釈することです。これを機能させるには、ID にドットを使用するか、ドットをエスケープする必要はありません。

または、次のような属性セレクターを実行できます。

$("[href='"+pathname+"']").find('.navblocks').css('box-shadow','0px 0px 20px inset');

これは、全体的にはるかに少ない作業になります

于 2013-11-04T23:07:24.347 に答える
2

問題はあなたの.中にありますid。jQuery がこれを ID として読み取るのではなく、ID の後に Class セレクターが続くようにするには、これをエスケープする必要があります。

id = "#index\\.html"

これには、次を使用できます。

var id = "#" + pathname.replace('.', '\\\.');

ページの JavaScript コンソール内でこれをテストすると、次の結果が得られます。

実施例

于 2013-11-04T23:09:03.077 に答える
1

問題は、正しい DOM 要素を選択するために #index.html や #cleaning.html などを使用している ID にあるようです。これは誤りであり、#index と #cleaning は有効な ID であるため、実際には単に使用する必要があります (ID で . を使用することは HTML/XHTML で違法です)。

これを回避する 1 つの方法は、次のように id を分割して、ファイル拡張子を含めるのではなく、html ファイル名だけを使用できるようにすることです。

 var path = window.location.pathname;
        if(path === "/")
            {
            var pathname = path.replace("/","index.html");
            }
        else
            {
            pathname = path.replace("/","");
            }

        pathname = pathname.split(".");
        var id = "#" + pathname[0];

        alert("id = " + id);
        $('a').each(function() 
            {
            var href = $(this).attr("href");
            alert("href = " + href);
            if (href === pathname)
                {
                $(id).css('box-shadow','0px 0px 20px inset');
                }

ファイル拡張子が削除されたため、#index.html ではなく #index を使用します。これを行うために追加したコードは次のとおりです。

pathname = pathname.split(".");
var id = "#" + pathname[0];

ソース: http://www.w3schools.com/jsref/jsref_split.asp

于 2013-11-04T23:13:34.813 に答える