javascript - jqueryui Accordion 根据选项卡禁用特定

Question

嗨，我是第一次尝试制作向导，我想在单击链接时禁用所有 Accordion 选项卡，它会启用下一个选项卡并打开它..我有这段代码，但它禁用了所有选项卡:(谢谢

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

Answer 1

不要为此使用 Accordion ，它不是为魔法而设计的。由于 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 实现:

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

当然..您必须自己设置主题，尽管复制/粘贴和重命名 Accordion 样式会让您大有帮助。一个更好的方法是用它制作一个官方的向导小部件。