Скрипт ядра jQuery - несколько экземпляров?

У меня на сайте есть следующий скрипт jQuery для переключения вкладок без перезагрузки страницы. Я использую ядро ​​jQuery 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 для второго экземпляра. Проблема в том, что когда я нажимаю на вкладку во втором экземпляре, она скрывает все div содержимого в первом экземпляре, и наоборот. Я хочу, чтобы они были независимы друг от друга.

<!-- 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>
Источник

2 ответа

Решение

На этой странице я нашел хорошее решение: вкладки 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();
Источник

В вашем коде есть несколько областей, в которых вы жестко закодировали элементы. Я предполагаю, что вы намереваетесь использовать другой контейнер для нового набора вкладок, поэтому вам нужно убедиться, что вы изменили эти части кода, если вы собираетесь внести минимальные изменения.

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

Источник
Другие вопросы по тегам