JQuery Core Tabs Script - مثيلات متعددة؟

Question

لديّ نص JQuery التالي على موقعي لتبديل علامات التبويب دون إعادة تحميل الصفحة. أنا أستخدم jQuery Core v1.3.2 (وليس jQuery UI)

<!-- JS -->
<script type="text/javascript">
    $(function() {
        var tabify = function () {
            var id = $('#content > div').hide().attr('aria-hidden', 'true').filter(window.location.hash || ':first').show().attr('aria-hidden', 'false').attr('id');
            $('#content > ul > li').removeClass('selected').find('a[href=#' + id + ']').parent().addClass('selected');
        }
        setInterval(tabify, 100);
        tabify();
    });
</script>

<!-- HTML -->
<div id="content">

  <ul>
    <li><a href="#blog" role="tab">Blog</a></li>
    <li><a href="#videos" role="tab">Videos</a></li>
    <li><a href="#photos" role="tab">Photos</a></li>
  </ul>            

  <div id="blog" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">Blog Content</div>
  <div id="videos" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">Videos Content</div>
  <div id="photos" role="tabpanel" aria-labelledby="tab3" aria-hidden="true">Photos Content</div>                       

</div>

أرغب في إضافة مثيل آخر لهذا البرنامج النصي على نفس الصفحة ، ولكن فقط نسخ/لصق هذا بأسماء متغيرة مختلفة لا يعمل. أيه أفكار؟

تعديل: هنا هو HTML و JS للمثال الثاني. المشكلة هي عندما أقوم بالنقر فوق علامة تبويب في المثيل الثاني ، فإنها تخفي جميع divs المحتوى في المقام الأول ، والعكس صحيح. أريدهم أن يكونوا مستقلين عن بعضهم البعض.

<!-- JS -->
<script type="text/javascript">
    $(function() {
        var tabifyplayer = function () {
            var idplayer = $('#discography > div').hide().attr('aria-hidden', 'true').filter(window.location.hash || ':first').show().attr('aria-hidden', 'false').attr('idplayer');
            $('#discography > ul > li').removeClass('selected').find('a[href=#' + idplayer + ']').parent().addClass('selected');
        }
        setInterval(tabifyplayer, 100);
        tabifyplayer();
    });
</script>

<!-- HTML -->
<div id="discography">
  <ul>
    <li><a href="#cor-player" role="tab">Chance of Rain (2009)</a></li>
    <li><a href="#debutcd-player" role="tab">Debut CD (2007)</a></li>
  </ul>

  <div id="cor-player" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">Content Goes Here</div>
  <div id="debutcd-player" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">Content Goes Here</div>
</div>

Answer 1

لقد وجدت حلًا جيدًا في هذه الصفحة: علامات تبويب jQuery - مجموعات متعددة على الصفحة

هناك عدد أقل من التكرار في الكود بهذه الطريقة أيضًا. (الشيء الوحيد الذي لا يفعله هو السماح لك باستخدام زر العودة ، لكن يمكنني العيش مع ذلك.)

jQuery.fn.minitabs = function(speed,effect) {
  var id = "#" + this.attr('id')
  $(id + ">div:gt(0)").hide();
  $(id + ">ul>li>a:first").addClass("selected");
  $(id + ">ul>li>a").click(
    function(){
      $(id + ">ul>li>a").removeClass("selected");
      $(this).addClass("selected");
      $(this).blur();
      var re = /([_\-\w]+$)/i;
      var target = $('#' + re.exec(this.href)[1]);
      var old = $(id + ">div");
      old.hide();
      target.show()
      return false;
    }
 );
}
$('#tabset1').minitabs();
$('#tabset2').minitabs();

Answer 2

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

<script type="text/javascript">
  $(function() {
    var tabify = function () {
      var id = $('#content > div') // Hard Coded content container.
                .hide()
                .attr('aria-hidden', 'true')
                .filter(window.location.hash || ':first')
                .show()
                .attr('aria-hidden', 'false')
                .attr('id');
      $('#content > ul > li') // Hard Coded tab elements.
        .removeClass('selected')
        .find('a[href=#' + id + ']')
        .parent()
        .addClass('selected');
    }
    setInterval(tabify, 100);
    tabify();
  });
</script>

على الرغم من ذلك ، من الأفضل أن تخدم بشكل أفضل عن طريق ضبط كل شيء قليلاً حتى لا تعتمد على فاصل زمني.

$(function () {
  var mine = $('#content > ul > li > a').click(function () {
    $(this)
      .parent()
      .addClass('selected')
      .siblings('li')
      .removeClass('selected');

    $('#content > div')
      .filter($(this).attr('href') || ':first')
      .show().attr('aria-hidden', 'false')
      .siblings('div')
      .hide().attr('aria-hidden', 'true');
  });

  if (window.location.hash != undefined) {
    mine.filter('[href=' + window.location.hash + ']').click();
  } else {
    mine.filter(':first').click();
  }
});

أعتقد أن المثال الثاني يجب أن يقترب من تحقيق ذلك (على الرغم من أن رؤية بنية HTML الخاصة بك ستساعدني على التحقق من ذلك) وسيكون من الأسهل التكيف مع مجموعة أخرى من العناصر.