jQuery lengüetas centrales de la escritura - varias instancias?

Question

Tengo el siguiente script de jQuery en mi sitio a las pestañas de conmutación sin recargar la página. Estoy usando jQuery v1.3.2 núcleo (NO 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>

Quiero añadir otra instancia de esta secuencia de comandos en la misma página, pero sólo tienes que copiar / pegar esto con diferentes nombres de variables no funciona. Algunas ideas?

EDIT: Aquí está mi HTML y JS para la segunda instancia. El problema es cuando hago clic en una pestaña en el segundo caso, se esconde todos los divs contenido en el primer caso, y viceversa. Yo quiero que sean independientes entre sí.

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

He encontrado una buena solución en esta página: jQuery pestañas - en varios conjuntos en la página

Hay menos duplicación de código de esta manera, también. (Lo único que no hace es dejar de utilizar el botón de retroceso, pero puedo vivir con eso.)

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

Usted tiene un número de regiones en su código en el que he elementos no modificables. Me imagino que va a utilizar otro contenedor para las nuevas pestañas establecidos, por lo que querrá asegurarse de que cambie esas partes del código si vas por un importe mínimo de alteración.

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

Realmente sin embargo, es probable que mejor servido mediante el ajuste de todo un poco para que no está confiando en un intervalo.

$(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();
  }
});

Creo que debería segundo ejemplo cerca de lograr el mismo (aunque ver a su estructura HTML me ayudaría a verificar que) y será más fácil de adaptar para otro conjunto de elementos.