Question

Here是我正在处理的小提琴项目的链接。我想要做的是根据屏幕上现在显示的部分切换活动菜单元素。因此，如果它是屏幕上的Kontakti，则菜单中的Kontakti（）必须显示为活动项目。我不熟悉jS

Answer 1

将data-role = navigate属性添加到容纳导航的ul元素，在这个小提琴的javascript部分，

请尝试使用以下代码

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

  })

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

1）将点击事件处理程序绑定到＆lt; a＆gt;里面＆lt; li＆gt;在里面＆lt; ul＆gt;使用属性data-role = navigate

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

3）将活动类分配给＆lt; a＆gt;

的直接父级

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

希望它有所帮助！

Answer 2

在这种情况下，

Bootstrap Affix可能会有用。它突出显示页面的哪个部分在页面的单独子导航部分显示在屏幕上。

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

Answer 3

您说您不熟悉JavaScript，但您要求提供需要JavaScript的功能。我推荐尝试使用插件，如果它不是你自己可以写的东西。

Waypoints将完全满足您的需求： http://imakewebthings.com/waypoints/guides/getting-started/

切换<li>活动元素</li>

3 个答案: