javascript - jQuery 导航栏

Question

我有一个侧面导航栏，它使用 jQuery 将隐藏的 div 拉到屏幕上。我希望<li>侧栏上的每个都在单击时获取活动类。

我试图让它说单击<li>将活动类提供给<li>，然后单击下一个<li>删除活动类并自动将其提供给下一个 clicked <li>。

我目前的方法效果不佳。下面是我的 HTML 和脚本：

<ul>
    <li id="overview" class="selector"><a href="#">OVERVIEW</a></li>
    <li id="whyus" class="selector"><a href="#">WHY US</a></li>
</ul>

<script>
jQuery("#overviewHidden").fadeIn();
jQuery("li#overview").addClass('active');

jQuery("#overview").click(function () {
    jQuery('ul li.active').removeClass('active');
    jQuery("li#overview").addClass('active');
    jQuery('#whyusHidden, #clientsHidden, #staffHidden').hide();
    jQuery('#overviewHidden').slideDown();
});

jQuery("#whyus").click(function () {
    jQuery('ul li.active').removeClass('active');
    jQuery("li#whyus").addClass('active');
    jQuery('#overviewHidden, #clientsHidden, #staffHidden').hide();
    jQuery('#whyusHidden').slideDown();
});
</script>

任何帮助都会很棒。谢谢！

Answer 1

尝试这样的事情：

var activeitem;

$(document).ready(function () {
  var items = $("li");
  for (var i = 0; i < items.length; i++) {
    items[i].onclick = function () {
      if (activeitem) {
        activeitem.removeClass("active");
      }
      activeitem = $(this);
      activeitem.addClass("active");
    };
  }
});

Answer 2

jQuery("li.selector").click(function () {
    $(this).addClass('active');
    $(this).siblings().removeClass('active');
});