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 Tabs - несколько находов на странице

Таким образом тоже меньше кодовых дублирование. (Только это не делает, это позвольте вам использовать кнопку назад, но я могу жить с этим.)

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-структура поможет мне проверить это) и будет легче адаптировать для другого набора элементов.