jQuery标签：能够改变标签，但内容不加载

我想改变基于按钮点击标签，但不知何故它不工作。它会更改选项卡，但不会加载内容，也不会调用选择或显示事件。这是我的标记看起来像：jQuery标签：能够改变标签，但内容不加载

<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();

可有人请指出我失去了什么吗？

来源

2012-04-24 Asdfg

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

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

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

来源

2012-04-24 15:29:11 Tejs

我早些时候尝试过，但它给了我currentTab变量中的内容div。我知道它应该给我选定的指数。任何想法为什么这样做？我在问题中的代码确实给了我选择的索引号。 – Asdfg 2012-04-24 15:37:34

该文档声明它应该是索引。但是，每次您调用'ChangeTab'时，您都会重新初始化制表符控件。这可能会干扰事物。 – Tejs 2012-04-24 15:39:49

如果我复制你的代码，它会在currentTab中给我DIV。如果我重新初始化点击函数中的选项卡，它会给我正确的索引并激活下一个选项卡。但它仍然不加载内容。 – Asdfg 2012-04-24 15:45:51

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-24 15:46:04 skafandri

selected给了我DIV，而不是所选标签的索引。多数民众赞成在jQuery网站的选项卡上的代码，以及我面临的问题。让我更新示例代码以显示如何初始化选项卡。可能是我在那里做错了事。 – Asdfg 2012-04-24 15:53:36

我演示的演示正在工作。问题是什么？ – skafandri 2012-04-24 16:07:23

我正在初始化一个函数内的标签，所以我失去了tab变量。我现在修好了。 – Asdfg 2012-04-24 16:55:48

有一些你的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-24 16:16:16 pomeh

$(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); 
    } 
});

尝试这个例子中提琴手，对不起，我不详细解释。

JSFiddle

来源

2012-04-24 16:21:02 DadViegas

jQuery标签：能够改变标签，但内容不加载

回答

相关问题