切换 <li> 活动元素

Question

Here 是 link 我现在正在做的 fiddle 项目。我想要做的是根据屏幕上现在显示的部分切换活动菜单元素。因此，如果它是屏幕上的 Kontakti，则菜单 () 中的 Kontakti 必须显示为活动项。我对 jS 不熟悉

Answer 1

您说您不熟悉 JavaScript，但您要求的功能需要 JavaScript。如果您无法自己编写插件，我建议您尝试使用插件。

Waypoints 会完全符合您的要求： http://imakewebthings.com/waypoints/guides/getting-started/

Answer 2

将 data-role=navigate 属性添加到放置导航的 ul 元素，在此 fiddle 的 javascript 部分中，

请尝试使用以下代码，

 $(function()
  {
  $("[data-role=navigate]").find("li > a").click(function()
    {
        $(this).parents("ul").find("li.active").removeClass("active");
        $(this).parent().addClass("active");
    })

  })

我将简要解释代码的作用...

1) 将点击事件处理程序绑定到内的

内，它位于

内，属性为 data-role=navigate

2) 当点击发生时，它会删除当前元素的活动 class。

3) 将活动 class 分配给

的直接父级

通过在 DOM 元素中放置属性并使用该属性连接事件侦听器，在 JS 中针对特定需求是一种很好的做法。

希望对您有所帮助！

Answer 3

Bootstrap 的 Affix 在这种情况下可能会有用。它在页面的单独子导航部分突出显示页面的哪个部分。

顺便说一句，如果您有 Bootstrap 代码，您可以很容易地在 Bootply 上显示它。它默认提供 Bootstrap 的 CSS 和 JavaScript 文件。

切换 <li> 活动元素

Switch <li> active element

javascript

jquery

html

menuitem