Question

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

我试图通过点击<li>来说明将活动课程提供给<li>，然后点击下一个<li>删除活动课程并自动提供它到下一个点击的<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');
});

jQuery导航栏

2 个答案: