Pregunta de dos partes de jQuery: ancla para imitar pestaña y evento de clic vinculante

Question

Pregunta

---

1. Me gustaría tener un ancla en la página que realice la misma función que la pestaña.
   Sólo pude hacerlo funcionar si coloqué algo como $('#tabs ul a:first').click() en el evento onclick del ancla particular.Nota:el href no tiene ningún efecto en los enlaces externos al complemento de pestaña;probablemente solo se use en los anclajes de la pestaña al construir su evento de clic.

2. Me encontré con un problema de enlace de jQuery.
   En lugar de realizar una búsqueda DOM para cada enlace, sería mejor almacenarlo en una variable y agregar el evento de clic al evento de clic del ancla externa.Sin embargo, cuando un selector devuelve múltiples objetos, el objeto en la matriz (lo más probable es que no sea una matriz lo que se devuelve, sino un objeto) no parece tener ninguna función.

Ejemplo de JSFiddle

js

---

$(function() {
    $( "#tabs" ).tabs(); 

    var tabs = $('#tabs ul li a');

    $( "#links2 a" ).each(function(index){
       $(this).bind('click',function(){
          (tabs[index]).click();
       });
    });
});

HTML/CSS (incompleto)

---

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css" />
<style type="text/css">
   #links1 , #links2, #links3      { margin-top:1em; font-size:1.5em;}
   #links1 a, #links2 a, #links3 a { text-decoration:none; color:#0cf}
</style>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Foo</a></li>
        <li><a href="#tabs-2">Bar</a></li>
        <li><a href="#tabs-3">Baz</a></li>
    </ul>
    <div id="tabs-1" ><p>Foo foo foo foo foo foo foo foo. foo-foo!</p></div>
    <div id="tabs-2" ><p>Bar bar bar bar bar bar bar bar. bar-bar!</p></div>
    <div id="tabs-3" ><p>Baz baz baz baz baz baz baz baz. baz-baz!</p></div>
</div>

<div id="links1">
   <div>HREF doesn't matter:</div>
   <a href="#tabs-1">foo</a>     
   <a href="#tabs-2">bar</a>           
   <a href="#tabs-3">baz</a>
</div>

<div id="links2">
   <div>Trying to dynamically bind onclick</div>
   <a href="#">foo</a> 
   <a href="#">bar</a>       
   <a href="#">baz</a>
</div>

<div id="links3">
   <div>What should happen, but not the right method:</div>
   <a href="#" onclick="$('#tabs li:first a').click()">foo</a>
   <a href="#" onclick="$('#tabs li a:eq(1)').click()//not sure if this is the best way to reference">bar</a>       
   <a href="#" onclick="$('#tabs li:last a').click()">baz</a>
</div>

Answer 1

En lugar de

(tabs[index]).click();

debería ser

tabs.eq(index).click();

La primera forma le proporciona el elemento DOM sin formato, mientras que la segunda le proporciona un elemento DOM envuelto en jQuery.No hay ningún método de "clic" en <a> nodos de elementos, al menos ningún método estándar.(Alternativamente, $(tabs[index]) también funcionaría.)