Zuganges Semantic JQuery Tabs Plugin

Question

Nur eine kurze Frage, um zu sehen, ob jemand von jQuery -Registerkarten -Plugins kennt, die auf einer ähnlichen Struktur ausführen wie folgt:

<div class="tabs">
    <div>
        <h4>Tab one</h4>
        <p>Lorem Ipsum</p>
    </div>

    <div>
        <h4>Tab two</h4>
        <p>Lorem Ipsum</p>
    </div>
</div>

Wo das Plugin den Titel der Registerkarten aus den H4s greift? Ich kann nur Plugins finden, die die Struktur verwenden:

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

Ich gehe davon aus, dass die einzige Möglichkeit, diese Plugins zu verwenden, darin besteht, die Titel zu schnappen, sie zu entfernen, in eine Liste oben in der HTML hinzuzufügen und dann das Plugin basierend darauf auszuführen? Ich frage nur, wie ich bei JQuery ziemlich neu bin, also bin ich mir nicht sicher, wie ich es machen würde, und fragte mich nur, ob es bereits ein Plugin gab, von dem es irgendjemand wusste.

Wenn nicht, um sich keine Sorgen zu machen, muss ich mit den Dokumenten beschäftigt sein und es versuchen!

Prost

Answer 1

Ich habe es geschafft, etwas zusammenzustellen, um das HTML auf die richtige Struktur zu bringen, um die Registerkarte "JQuery UI" zu verwenden - hoffentlich kann jemand etwas daraus lernen!

$(document).ready(function() {
     $.fn.reverse = [].reverse; //Set the reverse function
    $('#tabs div h4').reverse().prependTo('#tabs'); //Grab the headings and reverse them, then prepend to outer div
    $('#tabs h4').wrap('<li></li>'); //wrap each heading in an li
    $('#tabs > li').wrapAll('<ul class="tabheadings"></ul>'); //wrap all li's in ul
    $('#tabs ul li h4').each(function(){
      $(this).replaceWith('<a>' + $(this).text() + '</a>'); //for each heading replace with an anchor but keep innards
   });
    $('#tabs div.in_content_box').each(function(i){
       $( this ).attr('id', 'tabs-' + (i+1)); //for each div add an id with an incremental number
    });
    $('#tabs ul li a').each(function(i){
        $( this ).attr('href', '#tabs-' + (i+1)); //match the href on the anchor with the id above
     });



});

Answer 2

jQuery zugängliche Registerkarten ist fast da, außer dass der Kopfball außerhalb des Zieldivs sitzt.