通过单击导航菜单中的链接将类添加到 li答案

【问题标题】：add class to li by clicking on a link from nav menu通过单击导航菜单中的链接将类添加到 li
【发布时间】：2014-08-05 21:34:46
【问题描述】：

我是新手，所以我希望我的问题有一些逻辑:)

我希望通过单击导航菜单中的链接将“活动”类添加到“li”（在本例中为页面中的投资组合过滤器项）。 “li”不是导航菜单的一部分，如果“li”在深层树中，我如何为“li”分配一个类 - 这是我网站的一个完全不同的部分。

the "li" is in:
<div class=""section"
<ul id="portfolio-filter" class="list-inline">
        <li <--- the place i wish the "active" be added

我检查了其他问题，但无法弄清楚如何实现特定需求。感谢您的帮助

【问题讨论】：

你有没有尝试过？
尝试了下面的答案 - 没有运气。我已经发布了一个新问题，其中包含有关此案例的更多详细信息：stackoverflow.com/questions/25176524/…

【解决方案1】：

你必须为菜单的链接创建一个监听器。在 JQuery 中，要创建侦听器，您需要使用“on”功能。

例子：

$("myElement").on("click",function(){});

之后，为“li”标签添加一个 id 属性。

例如：

<li id="myLI">

所以，当用户点击菜单的链接时，它会转到监听器。在监听器中，你会这样做：

$("#myLI").addClass("active")

不要忘记创建 css 类。

【讨论】：

感谢您的回答，非常感谢。我已经尝试过这个选项，但它只将我的 li 设置为活动类，而不管点击时的 myElement ......我已经创建了 css 类。为什么会这样？有什么想法吗？谢谢

【解决方案2】：

首先，您必须在 CSS 中指定 .active。

.active {
//add styles here
}

然后使用 javascript，您必须获取 #myLI 并使用 onclick 事件为它设置类 .active：

 var  element = document.getElementById("myLI");
 element.onclick = function() {
               element.setAttribute('class','active');
            }

【讨论】：