JQuery добавить класс. active в меню
У меня проблема.
Я хочу добавить класс "active" в меню пункта, когда включена относительная страница.
меню очень просто:
<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.
Я пытаюсь много решений, но ничего не работает.
Ответы
Ответ 1
Нажмите здесь для решения в jsFiddle
Что вам нужно - вам нужно получить имя window.location.pathname, а затем создать 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');
}
});
});
Ответ 2
Мне было легче:
var activeurl = window.location;
$('a[href="'+activeurl+'"]').parent('li').addClass('active');
потому что мои ссылки относятся к абсолютному URL-адресу, но если ваши ссылки относительны, вы можете использовать:
window.location**.pathname**
Ответ 3
Получить LI elments, выполнить цикл, проверить HREF:
$('.menu').find('a').each(function() {
if($(this).attr('href').indexOf('www.xyz.com/other/link1/')>0) {
$(this).addClass('active');
}
})
Ответ 4
Васим ответил, что несколько сообщений отсюда работают как рекламируемые:
http://jsfiddle.net/Realto619/jKf3F/1/
Ответ 5
Никакие другие методы "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');
}
});
});
Мне потребовалось четыре часа, чтобы найти его.
Ответ 6
window.location.href
предоставит вам текущий URL-адрес (как показано в адресе браузера). После разбора его и получения соответствующей части вы сравните его с каждой ссылкой href и назначьте класс active
соответствующей ссылке.
Ответ 7
Используйте window.location.pathname и сравните его со своими ссылками. Вы можете сделать что-то вроде этого:
$('a[href="~/' + currentSiteVar + '/"').addClass('active');
Но сначала вам нужно подготовить currentSiteVar, чтобы поместить его в селектор.
Ответ 8
Отметьте этот РАБОТЫ
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");
})
})
Ответ 9
Я предполагаю, что вы пытаетесь смешивать код 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
Ответ 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"
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>
Я думаю, что это полезно с вами.
Ответ 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;
Ответ 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>
Ответ 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");
})
});
Ответ 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');
- str получит , project_name, shop, detail_shop
- document.location.protocol получит http:
- document.location.hostname получит localhost
- str [1] получит имя_проекта
- str [2] получит магазин
По существу, это будет соответствовать ссылкам на nav, атрибут href начинается с "магазина" (или как бы то ни было, что вторичный каталог бывает).