1

上記のコードは正しく動作しません。Jquery を使用して、サブメニュー項目を持つ単純なメニューを実装する必要があります。Web ページを開くと、すべてのメニューとサブメニューのコンテンツがまとめて (スタックのように) 表示されます。コンテンツをメニュー項目に適切に割り当てるには、以下に示す JavaScript を改善する必要があります。したがって、「menu2」をクリックすると、DIV id = 「menu2」のコンテンツがあるはずです。すべてのコンテンツが 1 ページに表示されるようになりました。

<!-- 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>
4

1 に答える 1

1

この行には問題があります

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

そのIDのアイテムはありません...（$ contentは長さ0です）

例えば

  1. あなたはとのリンクを押すhref="#menu1"
  2. $active.attr('href')に等しい#menu1
  3. これは$content = $("#menu1");
  4. ID「menu1」の要素はページにありません

jQueryでは、ハッシュ（＃）を含むセレクターは-ハッシュ記号の後にIDを持つ要素を検索することを意味します

つまり#menu1、（ほぼ）と同じ意味ですdocument.getElementById("menu1")

ただし、そのID（またはhref値と等しいID）を持つ要素はありません。

それは最後の問題ではないかもしれませんが、これはそれを機能させるための試みの次の停止です...

jsFiddleで見る

于 2012-05-07T21:26:14.900 に答える