0

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) navlink を強調表示し、(2) 関連するコンテンツを表示しました。

現在、[次へ] ボタンを機能させて、自動的に次のトピックに移動するのに苦労しています。

私は (明らかに!) JQUERY は初めてです。ヒントをいただければ幸いです。または、サブナビの既存のコードを改善する方法についての提案。

4

2 に答える 2

0

これを試して：

 $(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");
    });
于 2013-03-07T02:41:13.657 に答える
0

試す：

$(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");

});

ここでフィドル

于 2013-03-07T02:16:15.420 に答える