次のjQueryタブにスクロールするボタンを作成するにはどうすればよいですか。ステップバイステップチュートリアルのような、次のタブにスクロールするタブ内に次のボタンを配置したいと思います。
これはどのように行うことができますか?これまでの私のコードは以下です。
HTML
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p> <a href="nexttab">Next Tab</a>
</div>
<div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</div>
<div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</div>
</div>
JS
$(document).ready(function () {
$("#tabs").tabs();
});
selected
オプション を使用して、次のように移動できます。
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});
次のように、一致するようにアンカーを変更するだけです。
<a class="nexttab" href="#">Next Tab</a>
または、次のように、各「次のタブ」リンクが特定のタブを指すようにして、 select
method を使用します。
<a class="nexttab" href="#fragment-2">Next Tab</a>
次に、少し短いjQueryを使用して、任意のタブに移動できます。
$(".nexttab").click(function() {
$("#tabs").tabs("select", this.hash);
});
「選択された」が廃止されたため、UI 1.10.0ではこのソリューションが機能しないことがわかりました。以下は1.10以前のバージョンで動作します-
$("#tabs").tabs();
$(".nexttab").click(function() {
var active = $( "#tabs" ).tabs( "option", "active" );
$( "#tabs" ).tabs( "option", "active", active + 1 );
});
Nick Craverの回答に基づいて、次のように、各タブdivの下部にあるHTMLで次のような次のボタンを使用して同じ機能を作成しました。
<button class="btnNext" style="float:right">Next</button>
ニックの答えに基づいて、2つの関数を作成しました。
function moveToNextTab()
{
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
}
function EnableButtons(className)
{
//Enable Next buttons
var aryButton = document.getElementsByTagName("button");
for(var i = 0; i < aryButton.length; i++)
{
var e = aryButton[i];
if(e.className == className)
{
e.onclick = function()
{
moveToNextTab();
return false;
};
}
}
}
各ボタンは「btnNext」クラスに属しているため、ページが読み込まれた後、次のように呼び出します。
onload = EnableButtons("btnNext");
これにより、各ボタンが次のタブに移動できるようになります。