jquery - jQuery选项卡：能够更改选项卡但内容不加载

Question

我正在尝试根据按钮单击更改选项卡，但不知何故它不起作用。它确实会更改选项卡，但不会加载内容，也不会调用 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();

有人可以指出我在这里缺少什么吗？

Answer 1

您用于选择选项卡的代码似乎不正确。您正在进行的某些调用传递了太多（或不正确）的参数。你应该这样做：

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

    $('#content').tabs('select', newTab);
});

Answer 2

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/

Answer 3

您的 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 );
}

Answer 4

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