Question

嗨我想第一次制作一个向导我想要禁用所有的手风琴选项卡，当我点击它启用下一个选项卡并打开它的链接.. 我有这个代码，但它禁用所有标签:( 感谢

$(function() {
   $("#list1a").accordion({
    autoHeight: false,
    navigation: false
   });
});
$("#list1a").accordion("disable"); 
$("#list1a").accordion("activate", 2 );

Answer 1

不要使用手风琴，它不适合巫术。由于jquery UI中没有可用的向导组件，让我们自己制作;）

HTML：

<ul class="ui-wizard">
   <li class="ui-wizard-panel">
      <h3 class="ui-wizard-header">panel 1</h3>
      <div class="ui-wizard-content">
          Panel content
          <span class="ui-wizard-next">Goto next</span>
      </div>
   </li>
   <li class="ui-wizard-panel">
      <h3 class="ui-wizard-header">panel 1</h3>
      <div class="ui-wizard-content">
          Panel content
          <span class="ui-wizard-next">Goto next</span>
      </div>
   </li>
</ul>

javascript插件：

$.fn.wizard = function(){
   this.find('.ui-wizard-content').hide();
   this.find('.ui-wizard-content:first').show();
   this.find('.ui-wizard-content:last .ui-wizard-next').hide(); // just in case
   this.delegate('.ui-wizard-next', 'click', function(){
      // very long jquery chain...
      $(this).closest('.ui-wizard-content')
             .hide('fast')
             .closest('.ui-wizard-panel')
             .next()
             .find('.ui-wizard-content')
             .show('fast');
   });
}

javascript impl：

$(".ui-wizard").wizard();

当然..你必须自己主题，虽然复制/粘贴和重命名手风琴风格会让你走得很远。一个更好的方法是制作一个官方的向导小部件。

Answer 2

还可以查看此代码：http://github.com/desdev/jWizard/ 认为这正是你所需要的。

Answer 3

尝试使用ui-state-disabled类：http://api.jqueryui.com/theming/css-framework/ 考虑允许用户返回的这段代码，但不要转到下一个手风琴选项卡：

function disableAccordionNextTabs () {
    var $accordion  = $(".accordion");
    var active      = $accordion.accordion('option', 'active');
    var $headers    = $accordion.find($accordion.accordion('option', 'header'));

    $headers.addClass('ui-state-disabled');
    for (var i = active; i >= 0; i--) {
        $headers.eq(i).removeClass('ui-state-disabled');
    }
}

jqueryui手风琴禁用特定标签

3 个答案: