Question

我在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();

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

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

Answer 2

找到答案：

在

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

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

2 个答案: