Активный пункт меню

Gorobez · September 28, 2011

есть список вида

<ul id="id_test">
    <li><a href="http://test.ru/blog/link1.html">link1</a>
    <li><a href="http://test.ru/blog/link2.html">link2</a>
    <li><a href="http://test.ru/blog/link2.html">link3</a>
</ul>

.current a{
   color: red;
}

как на js сделать подсветку активной ссылки?

Edited September 29, 2011 by Gorobez

sigma77 · September 28, 2011

Gorobez,

Получаешь document.location и добавляешь класс нужной ссылке.

Gorobez · September 29, 2011

Я не могу понять как это происходит?

$('UL #id_test A').each(function () {
    var re = new RegExp('^' + this.href);
    if(re.test(document.location.pathname)) {
        this.parentNode.className = "current";
    }
});

Edited September 29, 2011 by Gorobez

sigma77 · September 29, 2011

Gorobez,

Ну, во-первых, $('UL #id_test A')

Во-вторых, смотри, что тебе возвращают this.href (http://test.ru/blog/link1.html) и document.location.pathname (на локальной машине явно не /blog/link1.html)

Быколай · September 29, 2011

Блин, вот совпадение. Только сегодня на работе подумал (прикрутив вчера в очередной раз подсветку ссылки к одному проекту), надо бы заметку набросать на эту тему небольшую. Прихожу домой и вижу тут эту тему. В общем, Горобец и всем страждущим посвящаю:

Активный пункт меню

Shift-Web · September 30, 2011

Я вот такой сниппет писал для статики


    //__ Locations detect 
    $.root.find('#head ul a').each(
      function() {
      	var rLoc = document.location.pathname;
      	var lLoc = $(this).attr('href');
      		if( rLoc.match(lLoc) ) {
      			$(this).parent('li').addClass('location');	
      		}			
      }
    );

Подсвечивает также по всем уровням вложенности, если есть совпадения.

Edited September 30, 2011 by Shift-Web

Gold Dragon · October 1, 2011

если приложение на Ajax, то можно воспользоваться таким вариантом

<!DOCTYPE html>
<html>
<head>
	<title>Пример создания активного пункта меню</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<script type="text/javascript" src="jquery.js"></script>
	<style>
		#id_test li a {
			color: #006400;
		}

		#id_test li a:hover {
			color: #dc143c;
		}

		.active {
			color: #dc143c !important;
			font-weight: bold;
		}
	</style>
</head>
<body>
<ul id="id_test">
	<li><a href="#">link1</a>
	<li><a href="#">link2</a>
	<li><a href="#">link3</a>
</ul>
<hr/>

<script type="text/javascript">
	$(function() {
		$('#id_test li a').bind('click', function(event) {
			$('#id_test li a').removeClass('active');
			$(this).toggleClass('active');
		});
	});
</script>
</body>
</html>

mannvillage · October 6, 2011

Блин, вот совпадение. Только сегодня на работе подумал (прикрутив вчера в очередной раз подсветку ссылки к одному проекту), надо бы заметку набросать на эту тему небольшую. Прихожу домой и вижу тут эту тему. В общем, Горобец и всем страждущим посвящаю:
Активный пункт меню

Я себе на сайте подобную штуку реализовал - работает. Там с кодом внимательнее нужно

Edited October 6, 2011 by mannvillage

Sign In

Активный пункт меню

Question

Gorobez

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

sigma77

Link to comment

Share on other sites

Gorobez

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

Быколай

Link to comment

Share on other sites

Shift-Web

Link to comment

Share on other sites

Gold Dragon

Link to comment

Share on other sites

mannvillage

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information