jquery - Jquery中的帮助需求

Question

问题是我使用的代码只是删除了“.now”类。我希望通过单击锚标记将“.year_line”类替换为“.now”类。

                <div class="tym_line">
                <ul>
                <li class="now"><a href="#">Now</a></li>
                <li class="year_line"><a href="#">2013</a></li>
                <li class="year_line"><a href="#">2012</a></li>
                <li class="year_line"><a href="#">2011</a></li>
                <li class="year_line"><a href="#">2010</a></li>
                <li class="year_line"><a href="#">2009</a></li>
                <li class="year_line"><a href="#">2008</a></li>
                <li class="year_line"><a href="#">2007</a></li>
                <li class="year_line"><a href="#">2006</a></li>
                <li class="year_line"><a href="#">2005</a></li>
                <li class="year_line"><a href="#">2004</a></li>
                <li class="year_line"><a href="#">2003</a></li>
                <li class="year_line"><a href="#">2002</a></li>
                <li class="year_line"><a href="#">2001</a></li>
                <li class="year_line"><a href="#">Born</a></li>

                </ul>
            </div>                  


         JQuery code:


           $('.tym_line').on('click', 'li', function() {
           $(this)
        .removeClass('year_line')     
               .addClass('now')
      .removeClass('now')         
              .addClass('year_line');

             return false;
          });

Answer 1

$('.tym_line').on('click', 'li', function() {
    $(this)
        .removeClass('year_line')
        .addClass('now')
        .siblings()
            .removeClass('now')
            .addClass('year_line');

    return false;
});

http://jsfiddle.net/3Ny4y/10/

year_line尽管您可以像使用 CSS 选择器一样“取消”该类

.tym_line li

或者

.tym_line li:not(.now)

在这种情况下，您可以将 JS 片段缩减为：

$('.tym_line').on('click', 'li', function() {
    $(this)
        .addClass('now')
        .siblings()
            .removeClass('now');

    return false;
});