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');
  }
);

Live Demo OnHover

如果您想在点击时使用此

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

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

Live Demo OnClick

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

2 个答案: