0

我在 Dreamweaver 中使用 spry 选项卡式面板。我使用选项卡作为步骤，例如当用户完成选项卡 ​​1 中的过程并单击完成按钮时，选项卡 2 将打开。在这一步之前一切正常。

现在我想禁用选项卡，例如当用户出现在选项卡 1 中时，我希望禁用未来的选项卡（选项卡 2,3 和 4）。请告诉我如何做到这一点。

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

谢谢！

编辑.............

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

http://jsfiddle.net/AU9D9/

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

在

<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>

在 JS 中：

TabbedPanels1.showPanel(1);

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

2 回答 2

1

只需修改我更改的区域

HTML

<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>

JS代码

$(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();
    });
});
于 2012-09-03T14:18:23.213 回答
0

找到答案：

在

<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>

在 JS 中：

TabbedPanels1.showPanel(1);

$('.TabbedPanelsTabGroup').children().hide().eq(1).show();
于 2012-09-04T02:53:34.687 回答