jQuery добавить класс .active в меню

Question

У меня проблема.

Я хочу добавить класс «активный» в меню пунктов, когда соответствующая страница включена.

меню очень простое:

<div class="menu">

<ul>
<li><a href="~/link1/">LINK 1</a>
<li><a href="~/link2/">LINK 2</a>
<li><a href="~/link3/">LINK 3</a>
</ul>

</div>

В jQuery мне нужно проверить, если URL-адрес www.xyz.com/other/link1/

если это то, что я хотел бы добавить один класс, элемент 'a' ссылки1.

Я пробую много решений, но ничего не получается.

Answer 1

Нажмите здесь , чтобы найти решение в jsFiddle

Вам нужно получить окно window.location.pathname, как упомянуто, а затем создать из него регулярное выражение и проверить его на соответствие навигационным ссылкам.

$(function(){

    var url = window.location.pathname, 
        urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
        // now grab every link from the navigation
        $('.menu a').each(function(){
            // and test its normalized href against the url pathname regexp
            if(urlRegExp.test(this.href.replace(/\/$/,''))){
                $(this).addClass('active');
            }
        });

});

Answer 2

Для меня проще было:

var activeurl = window.location;
$('a[href="'+activeurl+'"]').parent('li').addClass('active');

потому что мои ссылки идут на абсолютный URL, но если ваши ссылки относительны, вы можете использовать:

 window.location**.pathname**

Answer 3

Никакие другие методы addClass не работали для меня при добавлении класса к элементу 'a' в меню, кроме этого:

$(function () {
        var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");  
        $('a').each(function () {
                            if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
                $(this).addClass('active');
            }
        });
    });

Мне понадобилось четыре часа, чтобы найти его.

Answer 4

Ответ Васима на несколько постов отсюда работает так, как рекламируется:

http://jsfiddle.net/Realto619/jKf3F/1/

Answer 5

Проверьте это это РАБОТАЕТ

Html

<div class="menu">

    <ul>
        <li><a href="~/link1/">LINK 1</a>
        <li><a href="www.xyz.com/other/link1">LINK 2</a>
        <li><a href="~/link3/">LINK 3</a>
    </ul>

</div>

Jquery

$(document).ready(function(){
    $(".menu ul li a").each(function(){
        if($(this).attr("href")=="www.xyz.com/other/link1")
            $(this).addClass("active");
    })
})

Answer 6

Получить LI-элементы, пройтись по циклу, проверить HREF:

$('.menu').find('a').each(function() {
    if($(this).attr('href').indexOf('www.xyz.com/other/link1/')>0) {
          $(this).addClass('active');
    }
})

Answer 7

Я предполагаю, что вы пытаетесь смешать код Asp и код JS, и в какой-то момент он нарушает или не правильно исключает вызовы привязки.

Возможно, вы можете попробовать использовать делегата вместо этого. Это исключит сложность того, когда связывать событие click.

Примером может быть:

$('body').delegate('.menu li','click',function(){
   var $li = $(this);

   var shouldAddClass = $li.find('a[href^="www.xyz.com/link1"]').length != 0;

   if(shouldAddClass){
       $li.addClass('active');
   }
});

Посмотрите, поможет ли это, он использует атрибут Начинается с селектора из jQuery.

Chi

Answer 8

Используйте window.location.pathname и сравните его со своими ссылками.Вы можете сделать что-то вроде этого:

$('a[href="~/' + currentSiteVar + '/"').addClass('active');

Но сначала вам нужно подготовить currentSiteVar, чтобы поместить его в selecor.

Answer 9

window.location.href даст вам текущий URL (как показано в адресе браузера).После анализа и извлечения соответствующей части вы должны сравнить ее с каждой ссылкой href и назначить класс active соответствующей ссылке.

Answer 10

Это работает для меня, в основном навигация такая же

<div id="main-menu">
  <ul>
    <li><a href="<?php echo base_url();?>shop">SHOP</a>
    <li><a href="<?php echo base_url();?>events">EVENTS</a>
    <li><a href="<?php echo base_url();?>services">SERVICES</a>
  </ul>
</div>

Допустим, вы находитесь по URL: http://localhost/project_name/shop/detail_shop/

И вам нужна ссылка "SHOP" наполучить класс «активный», чтобы вы могли визуально указать, что это активная навигация, даже если вы находитесь на подстранице «магазина» в «detail_shop».

JavaScript:

var path = window.location.pathname;
var str = path.split("/");
var url = document.location.protocol + "//" + document.location.hostname + "/" + str[1] + "/" + str[2];

$('#main-menu a[href="' + url + '"]').parent('li').addClass('active');

1. str получит , имя_проекта, магазин, detail_shop
2. document.location.protocol получит http:
3. document.location.hostname получит localhost
4. str [1] получит project_name
5. str [2] получит shop

По сути, это будет совпадать со ссылками в nav, атрибут href которых начинается с "shop" (или каков бы ни был вторичный каталог).