JQuery навигационное меню

Question

Приведенный выше код не работает должным образом. Мне нужно реализовать простое меню с элементами подменю, используя JQuery. Когда я открываю веб-страницу, я вижу содержимое всех меню и подменю вместе (например, стек). Мне нужно улучшить JavaScript, показанный ниже, чтобы правильно назначить контент элементам меню. Поэтому, когда я нажимаю «menu2», должно быть содержимое DIV id = «menu2». Теперь я вижу весь контент на одной странице.

<!-- Start css3menu.com BODY section --> 
<ul id="css3menu1"> 
<li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span>menu1</span></a> 
<ul class = "menu"> 
<li><a href="#submenu11">submenu11</a></li> 
<li><a href="#submenu12">submenu12</a></li> 
<li><a href="#submenu13">submenu13</a></li> 
<li><a href="#submenu14">submenu14</a></li> 
</ul></li> 
<li class="menu"><a href="#menu2" style="height:40px;line-height:40px;">menu2</a></li> 
<li class="menu"><a href="#menu3" style="height:40px;line-height:40px;">menu3</a></li> 
<li class="toplast"><a href="#menu4" style="height:40px;line-height:40px;">menu4</a></li> 
</ul> 
<!-- End css3menu.com BODY section --> 

<script> 
$('ul.menu').each(function() { 
var $active, $content, $links = $(this).find('a'); 
$active = $links.first().addClass('active'); 
$content = $($active.attr('href')); 
$links.not(':first').each(function() { 
$($(this).attr('href')).hide(); 
}); 

$(this).on('click', 'a', function(e) { 
$active.removeClass('active'); 
$content.hide(); 
$active = $(this); 
$content = $($(this).attr('href')); 
$active.addClass('active'); 
$content.show(); 
e.preventDefault(); 
}); 
}); 
</script> 

Answer 1

Эта линия имеет вопрос

$content = $($active.attr('href')); 

Там нет пункта с этим идентификатором ... ($ содержание длина 0)

например

1. Вы нажимаете ссылку с href="#menu1"
2. $active.attr('href') равна #menu1
3. который переводит к $content = $("#menu1");
4. нет ни одного элемента на странице с ID "menu1"

В JQuery в селектор с хешем (#) означает - найти элемент с идентификатором после знака хеша

Так #menu1 означает то же самое (почти), как document.getElementById("menu1")

Однако нет ни одного элемента с этим идентификатором (или любой другой идентификатор, который равна HREF значений)

Это может быть не последний вопрос, но это следующая остановка в попытке заставить его работать ...

См в jsFiddle