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

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

Answer 1

Click here решение в jsFiddle

Что вам нужно, вы должны получить window.location.pathname как уже упоминалось, а затем создать регулярное выражение из него и протестировать его против навигации 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'); 
      } 
     }); 

}); 

Answer 2

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

Answer 3

Получить LI элементов, входящих, проходное, проверьте HREF:

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

Answer 4

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

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

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

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

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

Возможно, вы можете попробовать использовать делегат вместо этого. Он вычеркнет сложность привязки события 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'); 
    } 
}); 

Смотрите, если это помогает, то он использует Attribute Starts With Selector из JQuery.

Chi

Answer 7

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

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

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

window.location**.pathname** 

Answer 8

Wasim ответим на несколько сообщений от работы работает как рекламируется:

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

Answer 9

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

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

Это заняло у меня четыре часа, чтобы найти его.

Answer 10

Настройка активного меню, у них есть много способов сделать это. Теперь я расскажу вам, как настроить активное меню с помощью 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" Тхи 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> 

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

Answer 11

эта работа для меня: 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; 

Answer 12

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

Answer 13

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

Answer 14

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

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

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

И вы хотите, чтобы ссылка «SHOP» li была активной, поэтому вы можете визуально указать, что это активная навигация, даже если вы находитесь на дополнительной странице «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. ул получит , project_name, магазин, detail_shop
2. document.location.protocol получит Http:
3. документ .место нахождения.имя хост получит локального ул [1] получит PROJECT_NAME
5. ули [2] получит магазин

По существу, которые будут соответствовать ссылкам нав кто есть Атрибут href начинается с «shop» (или как бы то ни было, что вторичный каталог бывает).