Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.12.2013, 12:31
Новичок на форуме
Отправить личное сообщение для Letto Посмотреть профиль Найти все сообщения от Letto
 
Регистрация: 16.06.2013
Сообщений: 6

Выделение активных пунктов многоуровневого меню на 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');
  });

что и куда нужно дописать? я в программировании полный чайник.
Прошу помощи у Вас
думаю не одного меня этот вопрос интересует.
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2013, 13:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,425

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>
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2013, 13:30
Новичок на форуме
Отправить личное сообщение для Letto Посмотреть профиль Найти все сообщения от Letto
 
Регистрация: 16.06.2013
Сообщений: 6

рони,
спасибо огромное !!
<script type="text/javascript">
	$(document).ready(function(){
		var link = window.location.pathname;
		$('.nav li a[href="'+link+'"]').parents('li').addClass('active');
	});
	</script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Scroll menu, подсветка активных пунктов меню при скролле makissm21 AJAX и COMET 13 29.04.2017 19:28
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 14:31
Вылеление активных пунков меню. Нужна помощь ! panictmn Элементы интерфейса 27 22.01.2014 10:18
Не работает jQuery меню с AJAX eugene1986 jQuery 0 08.07.2010 17:49
jQuery jTreeMenu plugin Seafnox jQuery 9 12.01.2010 20:55