jquery - 滑块的活动类

Question

伙计们，我只是坚持这一点，正在上课。它只是对我不起作用-我将显示代码，它可以让您更快地帮助我。我知道该理论背后的 Jquery 逻辑，但实际上它只是没有完成。这就是我过来问这个的原因。它在http://jsfiddle.net/j08691/dZ9KP/12/上。

<div id="MainContainer">
  <ul id="MainNav">
    <li> <a href="#page1">   title 1  </a>     </li>
    <li>    <a  href="#page2">  title 2 </a>     </li>                
  </ul>
  <div id="MainContent">
    <div class="MainContentEach" id="page1">
      title 1 content
    </div>
    <div class="MainContentEach" id="page2">
      title 2 content
    </div>
  </div>
</div>

JS

     $(function () {
        $('#MainNav a').click(function () {
        pageId = $(this).attr('href');
        num = $('#MainNav a').index(this);
        $(pageId).parent().animate({ scrollTop: (500 * num) }, 'slow');
        });
      });

任何帮助，将不胜感激。

Answer 1

如果您只需要在点击标签时添加一个调用标签的类active，<a>您可以执行以下操作：

$(function () {
    $('#MainNav a').click(function () {
         pageId = $(this).attr('href');
         num = $('#MainNav a').index(this);
         $(pageId).parent().animate({ scrollTop: (500 * num) }, 'slow');

         $('#MainNav a').each(function () {
             if ($(this).hasClass('active')) {
                 $(this).removeClass('active');
             }
         });

         if (!$(this).hasClass('active')) {
             $(this).addClass('active');
         }
    });
});

这将添加一个名为active您的<a>标签的类，请记住该类需要在您的样式表中定义。