jQuery - ScrollTo - 将菜单聚焦在所选目标上

jQuery - ScrollTo - focus menu on selected target

本文关键字：目标 聚焦 ScrollTo 菜单 jQuery      更新时间：2023-09-26

是否可以在使用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>

你可以这样做，我已经给了你的UL一个ID菜单

    $('#menu li a').hover(
  function () {
$(this).addClass('active').removeClass('inactive');
  }, 
  function () {
    $(this).addClass('inactive').removeClass('active');
  }
);

实时演示悬停

如果你想在点击上做，使用这个

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

现场演示点击

是的，您可以在单击链接时将"active"或"inactive"添加到您的类中。在链接的onclick事件上，你可以使用 Jquery .addClass（） 函数添加 "active" 类，使用 .removeClass（） 删除"inactive"类

相关文章：