javascript - Onclick简单的JS菜单。我需要一些建议

Question

您好，我正在为页面子菜单开发这个简单的选项卡解决方案。它适用于 2 个选项“about-bio-txt”和“about-eb-txt”。当我尝试添加第三个选项时，我遇到了问题。我已将文本编辑为几个字，但代码完全相同。

<ul id="switch-menu">

  <li id="about-eb" class="on"><a href="#" onclick='$("#about-bio-txt").hide(); $("#about-3").hide(); $("#about-eb-txt").show(); return false;'>About Everyday Bright</a></li>
  <li id="about-bio"><a href="#" onclick='$("#about-eb-txt").hide(); $("#about-3").hide(); $("#about-bio-txt").show(); return false;'>Bio</a></li>
enter code here
  <li id="about-3"><a href="#" onclick='$("#about-eb-txt").hide(); $("#about-bio-txt").hide(); $("#about-3").show(); return false;'>About Three</a></li>

选项卡的内容就在此菜单之前。

<div id="about-eb-txt">The Constitution</div>
<div id="about-bio-txt">Science is life</div>
<div id="about-3">I AM A TREE</div>

我在想是否有人可以告诉我我做错了什么，以及我是否能够在需要时添加更多选项卡。

Answer 1

您的第三个选项的菜单 div ID 和关联的选项卡容器已被赋予相同的 ID - #about-3

下面的应该可以工作。还减少了同一隐藏请求的多个对象目标所需的 JS...

<li id="about-eb" class="on"><a href="#" onclick='$("#about-bio-txt, #about-3-txt").hide(); $("#about-eb-txt").show(); return false;'>About Everyday Bright</a></li>
<li id="about-bio"><a href="#" onclick='$("#about-eb-txt, #about-3-txt").hide(); $("#about-bio-txt").show(); return false;'>Bio</a></li>
<li id="about-3"><a href="#" onclick='$("#about-eb-txt, #about-bio-txt").hide(); $("#about-3").show(); return false;'>About Three</a></li>


<div id="about-eb-txt">The Constitution</div>
<div id="about-bio-txt">Science is life</div>
<div id="about-3-txt">I AM A TREE</div>