jQuery二つの部分というアンカーを表現するタブを結合クリックイベント
-
29-09-2019 - |
質問
質問
いてのアンカーのページを行うと同様の機能をタブです。
ただ、今までですが私のようなもの$('#tabs ul a:first').click()
のonclickイベントの特定のアンカー。注意:のurlに対しては何の影響もありません外部リンクのタブプラグイン;も満たないのではないでしょうかをアンカーのタブを構築する際、自らをクリックします。また、jQueryな結合。
を行うのではなく、DOMのルックアップのための各リンクできる変数の追加をクリックイベントへの外部アンカーのをクリックします。しかし、セレクタを返しますは、複数のオブジェクトのオブジェクトの配列(まがいない配列が返されるものの、オブジェクト)なされているわけではなさそうだ。
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>
解決
の代わりに
(tabs[index]).click();
あるべきで
tabs.eq(index).click();
最初の形がんの原DOM要素を取得しまjQueryに包まれたDOM要素になります。ありません""をクリックし方法 <a>
要素ノードは、少なくとも標準的な方法です。(または、 $(tabs[index])
います。)
所属していません StackOverflow