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標籤：能夠改變標籤，但內容不加載

回答

相關問題