3

現在、現在の URL と一致する属性を持つアンカーに が適用されるnavigation-menu場所を作成しようとしています。そのため、メニューの残りの部分から目立つようにそのアンカーをスタイルできます。active-classhref

これは私のマークアップです:

<div id="sidebar">

  <h2>Navigation menu</h2>
  <h2 class="subnav"><a href="menu1/menu_item1">Menu item 1</a></h2>
  <h2 class="subnav"><a href="menu1/menu_item2">Menu item 2</a></h2>
  <h2 class="subnav"><a href="menu1/menu_item3">Menu item 3</a></h2>
  <h2 class="subnav"><a href="menu1/menu_item4">Menu item 4</a></h2>
  <h2 class="subnav"><a href="menu1/menu_item5">Menu item 5</a></h2>

</div>

これはjQueryです：

   jQuery(function($) {

      // get the current url
      var path = location.pathname.substring(1); 

      // defining the top subnav anchor
      var $top_item = $('#sidebar h2:nth-child(2) a'); 

      // defining all subnav anchors
      var $all_items = $('#sidebar h2.subnav a'); 

      // defining the anchors with a href that matches the current url
      var $selected_item = $('#sidebar h2 a[@href$="' + path + '"]'); 

      // setting the selected menu item'class as active
      $selected_item.addClass('active'); 

      // THIS IS WHERE I THINK THE ERROR IS
      // if none of the h2.subnav's has a url that matches 
      // the current location then assume that it's the top one that's active:
      if ($all_items("href") !== path) $top_item.addClass('active');

  });

jQuery を使用してアクティブ クラスを適用しています。アンカーの href と場所の URL が一致している限り、正常に動作します。URL がどのアンカーとも一致しない場合は、active-class を に適用する必要があり$top_itemます。私のjQueryのその部分は機能しません。

エラーが何であるかはわかりませんが、やはりJavascript/jQuery n00bのようなものです。どんな助けでも大歓迎です。

4

4 に答える 4

6

これはあなたが望むはずです：一致するリンクをマークし、それが失敗した場合は、デフォルトのリンクをマークします。

function markActiveLink() {

    //Look through all the links in the sidebar
   $("div#sidebar a").filter(function() {

      //Take the current URL and split it into chunks at each slash
      var currentURL = window.location.toString().split("/");

      //return true if the bit after the last slash is the current page name
      return $(this).attr("href") == currentURL[currentURL.length-1];

    //when the filter function is done, you're left with the links that match.
    }).addClass("active");

   //Afterwards, look back through the links. If none of them were marked,
   //mark your default one.
   if($("div#sidebar a").hasClass("active") == false) {
      $("div#sidebar h2:nth-child(2) a").addClass("active");
    }
 }

markActiveLink();

また、 jQueryDocsサイトでこれに関する公式チュートリアルを見つけました。一番下までスクロールしてjQueryコードを確認してください。それはあなたの状況に合わせて調整されていませんが、それは私のものよりもきついです。

于 2008-11-19T19:41:44.867 に答える
1

このコードを試してみてください。私が働いている会社のためにまとめたものです。

// highlight tab function
var path = location.pathname;
var home = "/";
$("a[href='" + [path || home] + "']").parents("li").each(function() {   
    $(this).addClass("selected");
});
于 2008-11-19T19:02:13.197 に答える
1

すばらしい読み物..しかし、私は提案をしなければなりません..JSが完全に機能する場合でも、すべてのメニューリスト項目を順序なしリスト（または順序付きリスト）内に保持する必要があります..ベストプラクティスとして.. :)

于 2009-07-06T04:19:05.287 に答える
0

これを少し単純化できると思います：

function highlightSelected()
{
  $("h2.subnav a").each(
    function()
    {
      if (location.pathname.indexOf(this.href) > -1)
      {
        $(this).addClass("selected");
      }
    }
  );
}
于 2008-11-19T19:04:06.470 に答える