مكون الإضافي المكون من علامات تبويب jQuery الدلالية التي يمكن الوصول إليها

Question

مجرد سؤال سريع لمعرفة ما إذا كان أي شخص يعرف أي مكونات الإضافات jQuery التي يتم تشغيلها بناءً على بنية مماثلة لـ:

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

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

أين يمسك المكون الإضافي بعنوان علامات التبويب من H4S؟ لا يمكنني إلا أن أجد الإضافات التي تستخدم الهيكل:

<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>

أفترض أن الطريقة الأخرى الوحيدة لاستخدام هذه الإضافات هي الاستيلاء على العناوين وإزالتها وإضافتها إلى قائمة في الجزء العلوي من HTML ثم تشغيل المكون الإضافي بناءً على ذلك؟ أنا فقط أسأل لأنني جديد تمامًا على jQuery ، لذا لست متأكدًا من كيفية القيام بذلك وتساءلت فقط عما إذا كان هناك مكون إضافي موجود بالفعل يعرفه أي شخص.

إذا لم يكن الأمر كذلك ، فلا داعي للقلق ، سأضطر إلى الانشغال بالمستندات وإعطائها!

هتافات

Answer 1

تمكنت من وضع شيء معًا للحصول على HTML إلى الهيكل الصحيح لاستخدام علامات تبويب jQuery UI - نأمل أن يتعلم شخص ما شيء من هذا!

$(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 هناك تقريبًا ، باستثناء الرأس يجلس خارج Div المستهدف.