0

ボタンのクリックに基づいてタブを変更しようとしていますが、どういうわけか機能しません。タブは変更されますが、コンテンツは読み込まれず、select または show イベントも呼び出されません。これは私のマークアップがどのように見えるかです:

<div id="content">
   <ul>
      <li><a id="tab1" href="Page1.aspx"><span>Tab 1</span></a></li>
      <li><a id="tab3" href="Page2.aspx"><span>Tab 2</span></a></li>
      <li><a id="tab4" href="Page3.aspx"><span>Tab 3</span></a></li>
      <li><a id="tab5" href="Page4.aspx"><span>Tab 4</span></a></li>
      <li><a id="tab7" href="Page5.aspx"><span>Tab 5</span></a></li>
   </ul>
</div>


<button id="Button1" onclick="JavaScript:return ChangeTab();">Go to next tab</button>

function ChangeTab()
    {
         var $tabs = $('#content').tabs();
         var selected = $tabs.tabs('option', 'selected');
         $tabs.tabs("option", "selected", selected + 1);
         //$tabs.tabs('select', selected + 1);
         return false;
    }

これは私がタブを初期化する方法です:

$( "#content" ).tabs();

誰かが私がここで欠けているものを指摘できますか?

4

4 に答える 4

0 
$(function() {
    $('#content').tabs();

    $("#content").tabs("option", "selected", 1);


    var index = $("#content").tabs("option", "selected");

    $("#button1").click(function() {
        $("#content").tabs("option", "selected", 1);
    });


    window.setInterval(yourfunction, 1000);

    function yourfunction() {
        var x = (index++) % 3;
        $("#content").tabs("option", "selected", x);
    }
});

この例を Fiddler で試してください。申し訳ありませんが、詳しく説明しません。

JSFiddle

于 2012-04-24T16:21:02.207 に答える
0

HTML または Javascript コード内に何か問題があります。それはうまくいくはずです：これは最小限の動作デモですhttp://jsfiddle.net/pomeh/Csdf4/

HTMLコード

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">A</a></li>
        <li><a href="#tabs-2">B</a></li>
        <li><a href="#tabs-3">C</a></li>
        <li><a href="#tabs-4">D</a></li>
        <li><a href="#tabs-5">E</a></li>
    </ul>
    <div id="tabs-1">Content A</div>
    <div id="tabs-2">Content B</div>
    <div id="tabs-3">Content C</div>
    <div id="tabs-4">Content D</div>
    <div id="tabs-5">Content E</div>
</div>

<input type="button" value="Go next" onclick="goNext();" />

Javascript コード

var $tabs = $( "#tabs" );

// initialize once
$tabs.tabs({
    select: function(event, ui) {
        console.log( "select event" );
    },
    show: function(event, ui) {
        console.log( "show event" );
    }
});


function goNext() {
    // only "select" the next element in the handler
    var index = $tabs.tabs( "option", "selected" );
    $tabs.tabs( "select", index+1 );
}
于 2012-04-24T16:16:16.030 に答える
0

タブの選択に使用しているコードが正しくないようです。あなたが行っている呼び出しのいくつかは、あまりにも多くの (または間違った) パラメータを渡しています。次のようにする必要があります。

$('#Button1').click(function()
{
    var currentTab = $('#content').tabs('option', 'selected');
    var newTab = parseInt(currentTab) + 1;

    $('#content').tabs('select', newTab);
});
于 2012-04-24T15:29:11.737 に答える
0 
function ChangeTab(){
         var $tabs = $('#content');
         var selected = $tabs.tabs('option', 'selected');
         $tabs.tabs("option", "selected", selected + 1);
         $tabs.tabs('select', selected + 1);
}​

デモ: http://jsfiddle.net/ZffYf/

于 2012-04-24T15:46:04.203 に答える