javascript - jQuery - ScrollTo - 选定目标上的焦点菜单

Question

是否可以在使用 scrollTo 的菜单上添加“活动”或“非活动”来指示访问者是否选择了该菜单选项。

像：

<ul>
 <li><a href="#target1" class="inactive">Target 1</a></li>
 <li><a href="#target2" class="active">Target 2</a></li> <-- selected.
 <li><a href="target3" class="inactive">Target 3</a></li>
...
</ul>

Answer 1

是的，您可以在单击链接时将"active"或添加到您的班级。"inactive"在onclick链接事件中，您可以使用 Jquery .addClass()函数添加“活动”类并使用.removeClass()删除"inactive"该类

Answer 2

你可以这样做 我给你的 ul 一个 id 菜单

    $('#menu li a').hover(
  function () {

$(this).addClass('active').removeClass('inactive');
  }, 
  function () {

    $(this).addClass('inactive').removeClass('active');
  }
);

现场演示 OnHover

​如果您想在点击时执行此操作，请使用此

    $('#menu li a').click(
  function () {

$(this).addClass('active').removeClass('inactive');
      $('#menu li a').not(this).addClass('inactive').removeClass('active');
  }
);

​<a href="http://jsfiddle.net/TZvMP/" rel="nofollow">现场演示 OnClick