[英]Jquery navigation menu
上面的代码无法正常工作。 我需要使用Jquery实现一个带有子菜单项的简单菜单。 当我打开网页时,可以看到所有菜单和子菜单的内容(如堆栈)。 我需要改进下面显示的JavaScript,以便将内容正确分配给菜单项。 因此,当我单击“菜单2”时,应该有DIV id =“菜单2”的内容。 现在,我可以在一页上看到所有内容。
<!-- 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>
这行有问题
$content = $($active.attr('href'));
没有具有该ID的项目...($ content的长度为0)
例如
href="#menu1"
的链接 $active.attr('href')
等于#menu1
$content = $("#menu1");
在jQuery中,带有散列(#)的选择器意味着-在散列符号后找到具有ID的元素
因此, #menu1
含义(几乎)与document.getElementById("menu1")
但是,没有具有该ID(或任何等于href值的ID)的元素
它可能不是最后一个问题,但这是尝试使其工作的下一站...
参见jsFiddle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.