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 に答える