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

我在Dreamweaver中使用spry选项卡式面板。我将这些标签作为步骤使用，例如，当用户在标签1中完成该过程并单击完成按钮时，标签2将打开。一切工作正常，直到这一步。如何在Spry选项卡式面板中禁用选项卡

现在我想要禁用选项卡，例如当用户在选项卡1中时我希望将来的选项卡（选项卡2,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();

来源

2012-09-03 A Mohammed Hussain

给你的jsfiddle – Codegiant

试试我已经添加了的jsfiddle的代码。 –

只需修改区域，我改变

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

来源

2012-09-03 14:18:23 Codegiant

@A穆罕默德侯赛因是代码工作？ – Codegiant

如果需要修改，请通知。 – Codegiant

我在你的答案中加入了几行代码，它效果很好。非常感谢。 –

找到了答案：

在

<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-04 02:53:34

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

回答

相关问题