Jquery手風琴，下一個和上一個嚮導，如何獲取上一節和下一節？

我有一個Jquery手風琴，工作正常。單擊相應的標題時，節會展開/摺疊。但是我想添加這些功能，以便當我點擊「下一步」按鈕時，它會打開下一部分，點擊「上一步」按鈕可以回到上一節。Jquery手風琴，下一個和上一個嚮導，如何獲取上一節和下一節？

這個頁面已完成http://jquery.bassistance.de/accordion/demo/?p=1.1.2（最後一個例子），但不知道如何在我的情況下實現相同。

請提出任何建議。

感謝

UPDATE：我如何獲得手風琴的前面或後面的部分？

<script type="text/javascript"> 
$("#accordion").accordion({ 
    header: "h3.header" 
    , autoHeight: false 
    , collapsible: true 
    }); 
</script> 

<div id="accordion"> 
<h3 class="header">Section 1</h3> 
<div> content 1 .. content 1 .. content 1 .. content 1 .. 
    <input class="next" type="button" value="next"/> 
</div> 
<h3 class="header">Section 2</h3> 
<div> content 2 .. content 2 .. content 2 .. content 2 .. 
    <input class="previous" type="button" value="previous"/> 
    <input class="next" type="button" value="next"/> 
</div> 
<h3 class="header">Section 3</h3> 
<div> content 3 .. content 3 .. content 3 .. content 3 .. 
    <input class="previous" type="button" value="previous"/> 
</div> 
</div>

來源

2009-09-13 TigerTiger

你能標記其中一個答案爲接受或沒有任何一個適合你嗎？ – Mateng 2012-03-24 18:31:23

@Mateng - 我用JQueryUI手風琴而不是問題中的代碼，因爲當時沒有任何答案幫助我。 – TigerTiger 2012-03-26 13:48:59

jQueriUI Accordion是jQuery手風琴插件的繼承者。使用jQueryUI，@johnjelineks解決方案工作得很好。順便說一句：你可以回答自己的問題，然後將其標記爲正確。 – Mateng 2012-03-27 18:12:44

我能夠得到它的工作。給這一個鏡頭，它的工作原理與jQuery 1.6和jQuery UI 1.8：

HTML：

<div id="checkout"> 
    <h2><a href="#">Section 1</a></h2> 
    <div> 
     <form action="#"> 
      <h3>Content</h3> 
      <input type="submit" class="next" value="Continue" /> 
     </form> 
    </div> 
    <h2><a href="#">Section 2</a></h2> 
    <div> 
     <form action="#"> 
      <h3>Content</h3> 
      <input type="submit" class="prev" value="Back" /> 
     </form> 
    </div> 
</div>

的jQuery：

<script type="text/javascript"> 
    $(document).ready(function() { 
     // create new accordion 
     var checkout = $('#checkout').accordion({ event: false }); 

     // assign accordion navigation events to button clicks 
     $('form', checkout).each(function (index) { 
      $(this) 
      .children(':submit') 
      .filter('.next, .prev') 
      .click(function() { 
       checkout.accordion('option', 'active', index + ($(this).is('.next') ? 1 : -1)); 
       return false; 
      }); 
     }); 
    }); 
</script>

來源

2011-10-04 21:11:15

很好，這個工程。我在一個更長的表單中使用了它 - 因此我省去了輸入按鈕周圍的表單標籤，並用$（'div'，checkout）'替換了$（'form'，checkout）'部分。（在HTML中不允許嵌套表單）。 – Mateng 2012-03-24 18:29:29

您是否試圖像在示例中那樣做？

var wizard = $("#accordion").accordion({ 
    header: 'h3.header', 
    event: false 
}); 

$("h3.header", wizard).each(function(index) { 
    $(this) 
    .next() 
    .children(":button") 
    .filter(".next, .previous") 
    .click(function() { 
     wizard.changeAccordion("activate", index + ($(this).is(".next") ? 1 : -1)) 
    }); 
});

來源

2009-09-13 17:00:15 Vertigo

我試過了，但是它給了changeAccordion函數的錯誤（未找到）。「這個插件現在是jQuery UI的一部分，這個獨立版本將不再更新，該頁面將作爲參考。」所以我只是使用Jquery UI而不是這個插件中的文件。 – TigerTiger 2009-09-13 17:04:11

我一直在尋找一個解決同樣的問題，並想出這個（我使用jQuery 1.4.2和jQuery UI 1.8.1工作）：

<div id="wizard"> 
    <h3><a href="#step1">Step 1/3</a></h3> 
    <div id="step1"> 
     <button type="button">Next &raquo;</button> 
    </div> 
    <h3><a href="#step2">Step 2/3</a></h3> 
    <div id="step2"> 
     <button type="button">Next &raquo;</button> 
    </div> 
    <h3><a href="#step3">Step 3/3</a></h3> 
    <div id="step3"> 
     <button type="submit">Finish</button> 
    </div> 
</div>

這是腳本：

<script type="text/javascript"> 
    $(function() { 

     $('#wizard').accordion(); 

     $('#wizard :button').each(function (index, elm) { 
      $(elm).click(function() { 
       $('#wizard').accordion('activate', index + 1); 
      }); 
     }); 

    }); 
</script>

來源

2010-06-07 23:44:24

試試這個：

var wizard = $("#register_form").accordion({ 
    header: '.title', 
    event: 'none', 
    collapsible: false 
}); 
$(':button.previous').click(function() { wizard.accordion("activate", 0); }); 
$(':button.next').click(function() { wizard.accordion("activate", 1); });

其中:button是prev和next按鈕，而wizard是您的jQuery手風琴。忽略所有其他代碼。看看這是否有效。請留下意見，謝謝。

來源

2011-07-12 19:52:55 IzzyCooper

它可以工作，但只能在第一個和第二個窗格之間切換。 – Mateng 2012-03-24 18:18:48

我有一個類似的問題，使用：

<button onclick="$('#accordion').accordion('activate', 0);">Prev</button> 
<button onclick="$('#accordion').accordion('activate', 2);">Next</button>

每個手風琴窗格。這是在第二個窗格中，並將您帶回第一個（索引爲0）或轉發到第三個（索引爲2）。

來源

2011-08-03 20:01:13 cb20005

添加到您的jQuery文件。它添加了一個函數$（「＃accordion」）。accordion（「next」）和一個選項「loopOnNext」（默認爲false）來強制它在最後返回到頂盒。

$.extend($.ui.accordion.prototype, { 
    next: function(){ 
     var index = this.option('active') || 0, 
      next = index + 1, 
     nodes = $(this.element).children('h3').length; 
     if(next >= nodes && this.option('loopOnNext') === true) { 
      next = 0; 
     } 

     return this.activate(next); 
    } 
});

來源

2012-02-22 20:16:57

Jquery手風琴，下一個和上一個嚮導，如何獲取上一節和下一節？

回答

相關問題