Выделите кнопку в зависимости от местоположения

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

То, что я хочу, это:

1. Получить URL страницы
2. Получить конкретное имя файла страницы, и если не найден, то мы на главной странице.
3. Используя jQuery, я пытаюсь найти имя кнопки, и, если имя совпадает с именем файла, выделите его.

Дело в том, что это только выделяет кнопку "Домой". Что я делаю неправильно? Кроме того, если у вас есть предложения о том, как мне лучше это сделать, пожалуйста, дайте мне знать!

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

Когда вы объявляете свое регулярное выражение как новый объект 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')
}

И, как уже было сказано, легче присвоить класс вашему активному элементу.

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

У меня нет решения, но я бы предположил, что регулярное выражение ошибочно.Вы пытались сохранить результат в переменной и console.log это?