Question

我试图根据正在查看的页面突出显示导航按钮（在菜单中）。以下是我到目前为止的情况：

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"
    });
}

我想要发生的是：

获取页面的网址
获取页面的特定文件名，如果没有找到，那么我们就在主页上。
使用jQuery，我尝试找到按钮的名称，如果名称与文件名匹配，则突出显示它。

事情是，这只是突出了＆＃34; Home＆＃34;按钮。我究竟做错了什么？另外，如果您对如何更好地完成此任务有任何建议，请告诉我们！

Answer 1

我会得到这样的文件名，而不是：

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

alert(filename);

Answer 2

您的正则表达式不正确。

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

Answer 3

我没有解决方案，但我认为正则表达式存在缺陷。您是否尝试将结果存储在变量和console.log中？

Answer 4

我实际上已经实现了这样的东西。这是我的代码：

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()可能不是最有效的方法，但它肯定有效。

Answer 5

当你将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')
}

正如已经说过的，将类分配给活动元素会更容易。

根据位置突出显示按钮

5 个答案: