jQuery core tabs script - несколько экземпляров?

Question

У меня есть следующий сценарий 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> 

Я хочу добавить еще один экземпляр этого сценария на той же странице, а просто копировать/вставить это с разными именами переменных не работает. Есть идеи?

EDIT: Вот мой код HTML и JS для второго экземпляра. Проблема в том, что когда я нажимаю на вкладку во втором экземпляре, он скрывает все div 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> 

Answer 1

я нашел хорошее решение на этой странице: jQuery tabs - multiple sets on on page

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

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