jquery - 如何让下一个按钮转到页面上的下一个锚点w j​​Query

Question

http://jsfiddle.net/lizyo/geYka/18/

   $(document).ready(function () {
      $('.steps-content').css('display', 'none');
      $('#step_00').css('display', 'block');
   });

   $(document).on('click', '#steps-subnav li', function () {
      $('#steps-subnav li').removeClass('highlighted');
      $(this).addClass('highlighted');
   });

   $(document).on('click', '#steps-subnav a', function () {
      var linknum = $(this).attr('class').split('_')[1];
      $('#step_' + linknum).css('display', 'block');
      $('.steps-content').not("#step_" + linknum).css('display', 'none');
   });

我已经使用 jQuery 设置了一个子导航窗格，以 (1) 突出显示导航链接 (2) 显示相关内容。

现在，我正在努力让 NEXT 按钮自动将我带到下一个主题。

我（显然！）是 JQUERY 的新手。将不胜感激任何提示。或者关于如何改进我现有的 subnav 代码的建议。

Answer 1

尝试：

$(document).on('click', '#next', function () {

    var highlighted = $("#steps-subnav li").filter(".highlighted"),
        next = (highlighted.length > 0) ? highlighted.next() : $("#steps-subnav li:first");

    next.trigger("click");
    next.find("a").trigger("click");

});

在这里提琴

Answer 2

试试这个：

 $(document).on('click', '.red-button', function () {
        var $current = $('#steps-subnav li.highlighted');
        $('#steps-subnav .highlighted').removeClass('highlighted');

        var $next = $current.is(':last-child')? $('#steps-subnav li:first').next(): $current.next();
        $next.addClass('highlighted');
        $next.children('a').trigger("click");
    });