Javascript 如何在spry选项卡式面板中禁用选项卡

我正在dreamweaver中使用spry选项卡面板。我使用这些选项卡作为步骤，例如，当用户完成选项卡1中的流程并单击“完成”按钮时，将打开选项卡2。直到这一步，一切都很顺利

现在我想禁用选项卡，例如，当用户出现在选项卡1中时，我想禁用未来的选项卡（选项卡2、3和4）。请告诉我怎么做

我做了很多研究，但我能找到的只是jquery选项卡，我找不到spry选项卡面板的解决方案

谢谢

编辑

结果并不完全显示选项卡面板。但我希望查看编码就足够了

编辑。。。。。。。。。。。。找到了答案：

在

---

只需修改我更改的区域

HTML

找到了答案：

在

---

给出您在JSFIDDLE中尝试的代码如果需要修改，请告知。我在您的答案中添加了几行代码，效果非常好。谢谢。

<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="-1" id="tab1"><b>BOOKING</b></li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab2" style="">QUOTE</li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab3">SIGNUP</li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab4">PAYMENT</li>
    </ul>

<script type="text/javascript">
$(document).ready(function(){

    /*initially hide all tab except tab1*/
    $('.TabbedPanelsTabGroup').children().hide().eq(0).show();

    /*show tab2 when click the complete button by hiding all tabs*/
    $('.complete').on('click', function(){
         $('#tab2').siblings().slideUp();
        $('#tab2').slideDown();
    });
});
</script>

TabbedPanels1.showPanel(1);

$('.TabbedPanelsTabGroup').children().hide().eq(1).show();

<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" id="tab1">Tab 1</li>
    <li class="TabbedPanelsTab" id="tab2">Tab 2</li>
    <li class="TabbedPanelsTab" id="tab3">Tab 3</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
    <div class="TabbedPanelsContent">Content 2</div>
  </div>
  <input type="submit" value="complete" class="complete">  
</div>

$(document).ready(function(){

    /*initially hide all tab except tab1*/
    $('.TabbedPanelsTabGroup').children().hide().eq(0).show();

    /*show tab2 when click the complete button by hiding all tabs*/
    $('.complete').on('click', function(){
        $('#tab2').siblings().slideUp();
        $('#tab2').slideDown();
    });
});

<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="-1" id="tab1"><b>BOOKING</b></li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab2" style="">QUOTE</li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab3">SIGNUP</li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab4">PAYMENT</li>
    </ul>

<script type="text/javascript">
$(document).ready(function(){

    /*initially hide all tab except tab1*/
    $('.TabbedPanelsTabGroup').children().hide().eq(0).show();

    /*show tab2 when click the complete button by hiding all tabs*/
    $('.complete').on('click', function(){
         $('#tab2').siblings().slideUp();
        $('#tab2').slideDown();
    });
});
</script>

TabbedPanels1.showPanel(1);

$('.TabbedPanelsTabGroup').children().hide().eq(1).show();