Выделение активных пунктов многоуровневого меню на jQuery
Приветствую Вас, уважаемое сообщество. Интересует вопрос:
Есть меню следующего вида:
<ul>
<li><a href="/1"><span>Пункт меню 1</span></a>
<ul>
<li><a href="/1-1"><span>Пункт меню 1.1</span></a></li>
<li><a href="/1-2"><span>Пункт меню 1.2</span></a></li>
<li><a href="/1-3"><span>Пункт меню 1.3</span></a></li>
</ul>
</li>
<li><a href="/2"><span>Пункт меню 2</span></a></li>
</ul>
При переходе в Пункт меню 1, то ему автоматически присваивается класс .active и вложенные пункты при наличии этого класса раскрываю, если же мы идем дальше и заходим в Пункт меню 1.1, то класс с Пункт меню 1 сбрасывается и раскрывающийся список сворачивается чего быть не должно. По сути при присутствии на странице Пункт меню 1.1, то исходный код должен выглядеть вот так:
<ul>
<li class="active"><a href="/1"><span>Пункт меню 1</span></a>
<ul>
<li class="active"><a href="/1-1"><span>Пункт меню 1.1</span></a></li>
<li><a href="/1-2"><span>Пункт меню 1.2</span></a></li>
<li><a href="/1-3"><span>Пункт меню 1.3</span></a></li>
</ul>
</li>
<li><a href="/2"><span>Пункт меню 2</span></a></li>
</ul>
Вот сам код jQuery:
$(document).ready(function(){
var link = window.location.pathname;
$('.nav li a[href="'+link+'"]').parent().addClass('active');
});
что и куда нужно дописать? я в программировании полный чайник. Прошу помощи у Вас :) думаю не одного меня этот вопрос интересует. |
Letto,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.active {
border: #FF0000 2px solid;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
//var link = window.location.pathname;
var link = '/1-1';
$('.nav li a[href="'+link+'"]').parents('li').addClass('active');
});
</script>
</head>
<body>
<ul class="nav">
<li><a href="/1"><span>Пункт меню 1</span></a>
<ul>
<li><a href="/1-1"><span>Пункт меню 1.1</span></a></li>
<li><a href="/1-2"><span>Пункт меню 1.2</span></a></li>
<li><a href="/1-3"><span>Пункт меню 1.3</span></a></li>
</ul>
</li>
<li><a href="/2"><span>Пункт меню 2</span></a></li>
</ul>
</body>
</html>
|
рони,
спасибо огромное !! :dance:
<script type="text/javascript">
$(document).ready(function(){
var link = window.location.pathname;
$('.nav li a[href="'+link+'"]').parents('li').addClass('active');
});
</script>
|
| Часовой пояс GMT +3, время: 17:57. |