突出显示基于位置的按钮

我试图根据正在查看的页面突出显示导航按钮（在菜单中）。以下是我迄今为止：突出显示基于位置的按钮

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

突出显示基于位置的按钮

回答

相关问题