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

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

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

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

<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 " link1.

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

14 ответов


Нажмите здесь для решения в jsFiddle

что вам нужно, так это получить окно.местоположение.путь, как упоминалось, а затем создать regexp из него и протестировать его против навигации hrefs.

$(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');
            }
        });

});

более простой способ для меня был:

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

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

 window.location**.pathname**

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

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

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

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


никакие другие методы "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');
            }
        });
    });

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


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

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

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


зацените этой работает

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

Я предполагаю, что вы пытаетесь смешать код 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');
   }
});

посмотрите, помогает ли это, он использует Атрибут Начинается С Selector С помощью jQuery.

Чи


настройка активного меню, у них есть много способов сделать это. Теперь я поделюсь с вами способом установки активного меню с помощью CSS.

    <a href="index.php?id=home">Home</a>
    <a href="index.php?id=news">News</a>
    <a href="index.php?id=about">About</a>

теперь вы только установите $_request["id"] == "home" thì echo "class='active'" , то мы сможем сделать то же самое с другим.

<a href="index.php?id=home" <?php if($_REQUEST["id"]=="home"){echo "class='active'";}?>>Home</a>
<a href="index.php?id=news" <?php if($_REQUEST["id"]=="news"){echo "class='active'";}?>>News</a>
<a href="index.php?id=about" <?php if($_REQUEST["id"]=="about"){echo "class='active'";}?>>About</a>

Я думаю, что это полезно для вас.


эта работа для меня :D

    function setActive() {
      aObj = document.getElementById('menu').getElementsByTagName('a');
      for(i=0;i<aObj.length;i++) {
        if(document.location.href.indexOf(aObj[i].href)>=0) {
          var activeurl = window.location;
          $('a[href="'+activeurl+'"]').parent('li').addClass('active');
        }
      }
    }

    window.onload = setActive;

<script type="text/javascript">
    jQuery(document).ready(function($) {
    var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); 
    $("#navbar li a").each(function() {//alert('dsfgsdgfd');
    if(urlRegExp.test(this.href.replace(/\/$/,''))){
    $(this).addClass("active");}
});
}); 
</script>

$(function() {
     var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
     $(".nav li").each(function(){
          if($('a',this).attr("href") == pgurl || $('a', this).attr("href") == '' )
          $(this).addClass("active");
     })
});

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

<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/

и вы хотите, чтобы ссылка "магазин" li получила класс "активный", чтобы вы могли визуально указать, что это активная навигация, даже если вы находитесь на подстранице" магазин "в"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. документ.местоположение.протокол будет http:
  3. документ.местоположение.имя будет localhost в
  4. str[1] будет имя_проекта
  5. str[2] будет магазин

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