如何在特定的情况下切换html div；李",；在jquery中单击菜单中的元素

我在as

li

中有一个列表项，它们具有唯一的id。我想要实现的是，如果单击特定的

li

项，则切换特定的div。当列表中存在大量“li”元素时，我如何使这成为可能。这是我的代码片段。在我的例子中，单击任何

li

元素时，它会切换

div

，而不是仅单击特定的

li

元素

<div class="nav-bar">
  <ul id="head-top-menu">
    <li> <a id="commercial" class="navmenu" data-item="#commercial">Commercial</a></li>
    <li> <a id="about" class="navmenu" data-item="#About">About</a></li>
    <li> <a id="contact" class="navmenu" data-item="#commercial">Contact</a></li>
    <li> <a id="login" class="navmenu" data-target=".login-signup">Login/Signup</a></li>

  </ul>
</div>

$（文档）.ready（函数（）{
$（'.login signup'）.hide（）；
$（'.navmenu'）。单击（函数（）{
$（'.navmenu.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
//如果单击了“#登录”，则仅在表单下方切换
if（$（this.attr（'id'）=“login”）{
警报（“切换”）；
$（'.Login signup'）.toggle（）；
}
});
});


商业的

关于

接触

登录/注册

您随时可以开箱即用
请尝试以下代码段

 $('.Login-signup').toggle(this.id.toLowerCase() === 'login');

您可以使用数据属性提供要选择的元素的ID或类别。因此，在这种情况下，您不必编写条件代码并签出哪个单击的元素应该切换哪个DIV

$('.navmenu').click(function () {
  $('.navmenu.active').removeClass('active');
  $(this).addClass('active');

  // Get ID or class from an attribute
  var target = $(this).attr('data-target');

  // Use that ID or class to select the element
  $(target).toggle();
});

…它确实可以工作，但在单击新的“li”元素时，它不会将以前的
li
元素
div
切换到原始状态。
$('.navmenu').click(function () {
  $('.navmenu.active').removeClass('active');
  $(this).addClass('active');

  // Get ID or class from an attribute
  var target = $(this).attr('data-target');

  // Use that ID or class to select the element
  $(target).toggle();
});