如何在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選項卡式面板中禁用選項卡

回答

相關問題