突出顯示基於位置的按鈕

我試圖根據正在查看的頁面突出顯示導航按鈕（在菜單中）。以下是我迄今爲止：突出顯示基於位置的按鈕

var loca = String(document.location.href); 

// Get document location and specific page. 
if (loca) { 
    if(loca.search(RegExp("((/[\w]*)\.php)")) != -1) { 
     activate(loca.match(RegExp("((/[\w]*)\.php)").split("/").join(""))); 
    } else { 
     activate("home"); 
    } 
} 

// Activate a button 
function activate(bName) { 
    $(".button[name=" + bName + "]").css({ 
     "border-left": "1px solid white", 
     "border-right": "1px solid white" 
    }); 
}

我希望發生的是：頁面的

獲取URL
獲取頁面的特定文件名，如果沒有找到，則我們在主頁上。
使用jQuery，我嘗試查找按鈕的名稱，如果名稱與文件名匹配，則突出顯示它。

事情是，這隻突出顯示「主頁」按鈕。我究竟做錯了什麼？另外，如果您對如何更好地完成此任務有任何建議，請讓我知道！

來源

2011-03-15 Shaz

我也建議做一個CSS類，然後添加/刪除類，而不是硬編碼的值。 – 2011-03-15 18:53:13

@尼克：我同意你的看法，我以前也是這樣，但我仍然有同樣的問題。 ;） – Shaz 2011-03-15 20:11:30

我會得到的文件名是這樣，而是：

var pathname = window.location.pathname.split("/"); 
var filename = pathname[pathname.length-1].split(".")[0]; 

alert(filename);

來源

2011-03-15 18:45:15 mattsven

我最喜歡這種方式;更簡單和更清潔。謝謝！ – Shaz 2011-03-15 20:42:24

我沒有一個解決方案，但我會假設正則表達式是有缺陷的。你有沒有嘗試將結果存儲在變量和console.log中？

來源

2011-03-15 18:49:52

您的正則表達式不正確。

var loc_match = window.location.href.match(/(\w+)\.php/); 
activate(loc_match ? loc_match[1] : "home");

來源

2011-03-15 18:50:02 Haochi

我已經實現了這樣的東西。這是我的代碼：

var currentPage = window.location.pathname.toLowerCase().split('/').reverse()[0].split('#')[0].split('?')[0]; 

if (!currentPage || currentPage == '') 
{ 
    currentPage = 'default.aspx'; 
} 

$('#nav li').removeClass('current').each(function() { 
    var href = $(this).find('a').first().attr('href'); 
    if (href && href.toLowerCase().indexOf(currentPage) >= 0) 
    { 
     $(this).addClass('current'); 
    } 
});

這考慮到任何查詢字符串或搜索可能在URL中。使用reverse()可能不是最有效的方法，但它確實有效。

來源

2011-03-15 18:58:42

當您將regexp聲明爲新的RegExp對象時，必須使用雙反斜槓轉義符號（而不是像一個反斜槓，當您只指定文字時，如var a = /\w/i;）; 所以，你的代碼應該有的REG EXP修正後的工作：

var loca = document.location.href; 
var pattern = new RegExp("[\\w]*(?=\\.php)","i"); 
// Get document location and specific page. 
    if(pattern.test(loca)) { 
     activate(pattern.exec(loca)); 
    } else { 
     activate("home"); 
    } 
// Activate a button 
function activate(bName) { 
    $(".button[name=" + bName + "]").addClass('active') 
}

而且前面已經說了，它更容易分配類的有源元件。

來源

2011-03-15 19:11:08 Johnner

這工作完美，我真的很感激提示。 :) – Shaz 2011-03-15 20:39:37

突出顯示基於位置的按鈕

回答

相關問題