Question en deux parties jQuery - ancre pour imiter l'onglet et l'événement de clic de liaison

Question

Question

---

1. J'aimerais avoir une ancre dans la page qui remplit la même fonction que l'onglet.
   Je n'ai pu le faire fonctionner que si je plaçais quelque chose comme $('#tabs ul a:first').click() dans l'événement onclick de l'ancre particulière.Note:le href n'a aucun effet sur les liens externes au plugin onglet ;il n'est probablement utilisé que dans les ancres de l'onglet lors de la construction de leur événement de clic.

2. Je suis tombé sur un problème de liaison jQuery.
   Au lieu d'effectuer une recherche DOM pour chaque lien, il serait préférable de le stocker dans une variable et d'ajouter l'événement click à l'événement click de l'ancre externe.Cependant, lorsqu'un sélecteur renvoie plusieurs objets, l'objet dans le tableau (il ne s'agit probablement pas d'un tableau renvoyé, mais d'un objet) ne semble avoir aucune fonction.

Exemple 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 (incomplet)

---

<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

Au lieu de

(tabs[index]).click();

ça devrait être

tabs.eq(index).click();

Le premier formulaire vous obtient l'élément DOM brut, tandis que le second vous obtient un élément DOM enveloppé dans jQuery.Il n'y a pas de méthode de "clic" sur <a> nœuds d'éléments, du moins pas de méthode standard.(Alternativement, $(tabs[index]) fonctionnerait aussi.)