使用jQuery進行活動導航 - 無法將默認類應用於定位

我目前正在嘗試製作一個導航菜單，其中將活動類應用於錨點並使用與當前網址匹配的hrefs，因此我可以設置樣式以使其從菜單的其餘部分脫穎而出的方式錨定。使用jQuery進行活動導航 - 無法將默認類應用於定位

這是我的加價：

<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的那部分不起作用。

我看不到錯誤是什麼，但是我又是一個Javascipt/jQuery n00b。任何幫助，將不勝感激。

來源

2008-11-19 timkl

$ all_items是一個jQuery對象，裏面有一堆匹配的鏈接 - 如果你想檢查每個鏈接的href，你需要使用類似.each（）的東西來循環。例如： $ all_items.each（function（）{alert（$（this）.attr（「href」））;}）; – 2008-11-19 20:27:26

這應該千方百計想讓你想要的：標記匹配鏈接，做不到這一點，標誌着您的默認之一。

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();

另外，我發現這個on the jQuery Docs site官方教程 - 滾動到頁面底部看到jQuery代碼。它比我的更緊，雖然它不適合你的情況。

來源

2008-11-19 19:41:44

第一部分工作很好，只需稍微調整一下以適合我的url-scheme。但是，我無法獲得最後一個工作片段。我用Firebug檢查源代碼，它顯示沒有任何錨點具有「活動」類。 – timkl 2008-11-19 22:29:27

給這個代碼一槍，它是我爲我工作的公司放在一起的東西。

// highlight tab function 
var path = location.pathname; 
var home = "/"; 
$("a[href='" + [path || home] + "']").parents("li").each(function() { 
    $(this).addClass("selected"); 
});

來源

2008-11-19 19:02:13 jrutter

我認爲你可以簡化這個有點：

function highlightSelected() 
{ 
    $("h2.subnav a").each(
    function() 
    { 
     if (location.pathname.indexOf(this.href) > -1) 
     { 
     $(this).addClass("selected"); 
     } 
    } 
); 
}

來源

2008-11-19 19:04:06 Tom

偉大的閱讀..但是，我不得不提出一個建議..即使JS完美工作，你真的應該保留在無序列表（或有序列表），所有菜單列表項作爲最佳實踐。。:)

來源

2009-07-06 04:19:05

使用jQuery進行活動導航 - 無法將默認類應用於定位

回答

相關問題