Question

我有一个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>

点击链接后如何切换活动状态？

提前致谢; - ）

Answer 1

试试这个

$(document).ready(function() {
    $('.date ul li ul li a').click(function(){ /* capture the click */
      $('.date ul li ul li a').removeClass('active'); /* remove all other active classes */
      $(this).addClass('active'); /* add active class to clicked link */
    }
});

或者使用通配符来提高可读性

$(document).ready(function() {
  $("[id^=year20]").click(function(){
    $("[id^=year20]").removeClass('active');
    $(this).addClass('active');
  }
});

Answer 2

只需将Common类添加到所有锚点，并使用该类名切换活动/非活动。

＆＃13;

$(document).ready(function() {
        $(".year_anchor").click(function () {
             $('#list a').removeClass('active'); 
             $(this).addClass('active');
        });
    });

＆＃13;

.active { color: black }

＆＃13;

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

＆＃13;

Please check the fiddle

Answer 3

首先，我会重新审视您的标记，因为您每个列表项都使用一个列表。看来你只需要一个列表，所以摆脱嵌套的<ul>标签： - ）

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

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

这应该可以胜任。

更改ul列表中的反应链接

3 个答案: