javascript - 更改UL列表中的响应式(Reactive)链接

我有一个ul列表作为菜单，我想设置活动链接。这是代码：

<ul id="list" class="date">
    <li class="element"><ul><li class="year"><a id="year2004" href ="2004.html" target="edicion" >2004</a></li></ul></li>
    <li class="element"><ul><li class="year"><a id="year2005" href ="2005.html" target="edicion" >2005</a></li></ul></li>
    <li class="element"><ul><li class="year"><a id="year2006" href ="2006.html" target="edicion">2006</a></li></ul></li>
    <li class="element"><ul><li class="year"><a id="year2007" href ="2007.html" target="edicion">2007</a></li></ul></li>
    <li class="element"><ul><li class="year"><a id="year2008" href ="2008.html" target="edicion">2008</a></li></ul></li>
    <li class="element"><ul><li class="year"><a id="year2009" href ="2009.html" target="edicion">2009</a></li></ul></li>
    <li class="element"><ul><li class="year"><a id="year2010" href ="2010.html" target="edicion">2010</a></li></ul></li>
    <li class="element"><ul><li class="year"><a id="year2011" href ="2011.html" target="edicion">2011</a></li></ul></li>
    <li class="element"><ul><li class="year"><a id="year2012" href ="2012.html" target="edicion">2012</a></li></ul></li>
    <li class="element"><ul><li class="year"><a id="year2013" href ="2013.html" target="edicion">2013</a></li></ul></li>
    <li class="element"><ul><li class="year"><a id="year2014" href ="2014.html" target="edicion">2014</a></li></ul></li>
    <li class="element"><ul><li class="year"><a id="year2015" href ="2015.html" target="edicion">2015</a></li></ul></li>
</ul>

我使用以下代码设置了第一个活动链接：

<script>
    $(document).ready(function() {
    $("#year2015").addClass("active");
    });
</script>

单击链接时如何切换活动状态？

提前致谢 ;-）

最佳答案

首先，我将重新审视您的标记，因为每个列表项使用一个列表。
似乎只需要一个列表，因此摆脱嵌套的<ul>标记:-)

要处理活动类，我将执行以下操作：

$('.date a').on("click", function() {
    var elem = $(this);
    $('.date a').removeClass("active");
    elem.addClass("active");
});

这应该做的工作。

关于javascript - 更改UL列表中的响应式(Reactive)链接，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35958145/