2

私のウェブサイトは、URLでハッシュを使用してAJAX （このチュートリアルから取得）でナビゲートします。リンクをクリックすると、URLの末尾に/＃/（リンク名）が追加されます。

mysite.comにいて、「photos」をクリックすると、URLはmysite.com/#/photosになり、「＃content」divに/photosの#contentdivが再入力されます。

また、何らかの理由でユーザーが手動で「mysite.com/photos」と入力してから「bio」をクリックすると、URLは「mysite.com/photos/#/bio」のようになります。

ページが再ロードされず、URlがメニューのタグのhrefと完全に一致しないという事実により、現在のメニュー項目にアクティブなクラスを追加する方法を理解するのが難しくなっています。

私のメニューはワードプレスによって生成され、次のようになります

<div id="main-menu">
<ul>
<li><a href="mysite.com/photos">Photos</li>
etc.
</ul>
</div>

助けてください！

4

1 に答える 1

2

バイオリンクをアクティブに設定しmysite.com/photos/#/bioたいと思いますか？つまり、URLの最後の「単語」です。

これを実現するには、次のようにします。

var path = window.location.pathname.split("\/"), myString;

if(path[path.length-1] === "")
    myString = path[path.length-2];

else
   myString = path[path.length-1];

myString = myString.toLowerCase()
console.log(myString);

パス名が「/hola/ bandola /」の場合、分割後の配列の最後の要素は空の文字列になりますが、「/ hola / bandola」だけの場合、「bandola」は最後のアイテム。したがって、両方の方法で機能させるには、チェックが必要です。これで、正しい文字列を持つその変数ができ、その情報でアクティブになるように正しいリンクを設定できます。

編集：ナビゲーションリンクを動的に生成しないため、コードから取得した値を、ナビゲーションリンクごとに一意の値と比較する必要があります。私の提案は、私のコードから取得した文字列と一致するデータ属性をa-tagsに追加することです。例：<li><a href="mysite.com/photos" data-page="photos">Photos</li>

次に、ULの各aタグを調べて、データページの値をクエリ文字列から取得した値と比較し、一致する場合はクラスを「アクティブ」に設定します。

var links = $("#main-menu").find("a");
$.each(links, function() {
         if($(this).data("page") === myString)
             $(this).addClass("active");
}​);​

aタグ内のテキストを比較することもできますが、テキストがurl-stringと一致しない場合は機能しないため、データ属性を追加することをお勧めします。上記のコードを編集して、データ属性と比較するときに「myString」変数が小文字になるようにしたことに注意してください。ご理解いただければ幸いです。

EDIT2：

代わりにa-tag内のテキストを比較するには、代わりに次の各ループを使用します。

var links = $("#main-menu").find("a");
$.each(links, function() {
         if($(this).html("page").toLowerCase() === myString)
             $(this).addClass("active");
}​);​
于 2012-04-09T21:17:38.593 に答える