Вопрос jQuery из двух частей - привязка к вкладке имитации и привязка события - PullRequest
Новая
       23

Вопрос jQuery из двух частей - привязка к вкладке имитации и привязка события

3 голосов
/ 04 ноября 2010

Вопрос

  1. Я бы хотел иметь привязку на странице, которая выполняет ту же функцию, что и вкладка.
    Я смог заставить его работать, только если поместил что-то вроде $('#tabs ul a:first').click() в событие onclick конкретного якоря. Примечание: href не влияет на внешние ссылки на плагин вкладок; вероятно, он используется только в привязках на вкладке при создании события щелчка.

  2. Я столкнулся с проблемой привязки jQuery.
    Вместо выполнения поиска DOM для каждой ссылки, было бы лучше сохранить это в переменной и добавить событие click к событию click внешнего якоря. Однако когда селектор возвращает несколько объектов, объект в массиве (скорее всего, это не возвращаемый массив, а объект), по-видимому, не имеет каких-либо функций.

Пример 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 (не полностью) 

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

1 Ответ

2 голосов
/ 04 ноября 2010

Вместо 

(tabs[index]).click();

это должно быть 

tabs.eq(index).click();

Первая форма получает необработанный элемент DOM, а вторая - элемент DOM, заключенный в jQuery.На <a> элементах нет метода "щелчка", по крайней мере, нет стандартного метода.(Как вариант, $(tabs[index]) тоже подойдет.)

...