当在jQuery中单击菜单中的特定“ li”元素时，如何切换html div

Question

我有一个带有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>

---

$(document).ready(function() {
  $('.login-signup').hide();

  $('.navmenu').click(function() {
      $('.navmenu.active').removeClass('active');
      $(this).addClass('active');
      //some thing like if else where if "#login" is clicked then  only toggle below form 

      $('.Login-signup').toggle();
    }
  });

});

Answer 1

 $(document).ready(function() { $('.login-signup').hide(); $('.navmenu').click(function() { $('.navmenu.active').removeClass('active'); $(this).addClass('active'); //some thing like if else where if "#login" is clicked then only toggle below form if ($(this).attr('id') == "login") { alert("toggle"); $('.Login-signup').toggle(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

使用attr()获取ID做一个条件语句并比较

Answer 2

您始终可以开箱即用地尝试以下代码段

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

演示

Answer 3

您可以使用数据属性来提供要选择的元素的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();
});