Domanda jQuery in due parti: ancoraggio alla scheda simulata e evento clic vincolante

Question

Domanda

---

1. Mi piacerebbe avere un'ancora nella pagina che svolga la stessa funzione della scheda.
   Sono riuscito a farlo funzionare solo se ho inserito qualcosa del genere $('#tabs ul a:first').click() nell'evento onclick del particolare ancoraggio.Nota:l'href non ha effetto sui link esterni al plugin tab;probabilmente viene utilizzato solo nelle ancore nella scheda durante la costruzione dell'evento clic.

2. Mi sono imbattuto in un problema di associazione jQuery.
   Invece di eseguire una ricerca DOM per ciascun collegamento, sarebbe meglio memorizzarlo in una variabile e aggiungere l'evento clic all'evento clic dell'ancoraggio esterno.Tuttavia, quando un selettore restituisce più oggetti, l'oggetto nell'array (molto probabilmente non è un array restituito, ma un oggetto) non sembra avere alcuna funzione.

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

Invece di

(tabs[index]).click();

dovrebbe essere

tabs.eq(index).click();

Il primo modulo ti fornisce l'elemento DOM grezzo, mentre il secondo ti fornisce un elemento DOM racchiuso in jQuery.Non esiste un metodo "clic" attivo <a> nodi elemento, almeno nessun metodo standard.(In alternativa, $(tabs[index]) funzionerebbe anche.)