2013-03-17 25 views
1

我每次點擊按鈕,我希望得到所選擇的選項卡的索引,而不是我得到空無法檢索的jQuery當前標籤指數

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jQuery UI Tabs Example 1</title> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> 
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'></script> 
<script> 
$(function() { 

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

    $("#button").click(function() { 
     var current_index = $("#tabs").tabs("option","selected"); 
     alert("The index of the current tab is " + current_index); 
    }); 
}); 
</script> 
</head> 
<body> 
<button id="button">Click me</button> 

<div id="tabs"> 
    <ul> 
     <li><a href="/buildFirstTab">First Tab</a></li> 
     <li><a href="/buildSecondTab">Second Tab</a></li> 
     <li><a href="/buildThirdTab">Third Tab</a></li> 
    </ul>  
</div> 

</body> 
</html> 
+2

這對我的作品http://jsfiddle.net/4dzT2/ – undefined 2013-03-17 17:17:25

回答

0
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js'></script> 

只需更換Ĵ查詢UI庫鏈接與新的..

更新的代碼

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jQuery UI Tabs Example 1</title> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> 
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js'></script> 

<script> 
$(function() { 

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

    $("#button").click(function() { 
     var current_index = $("#tabs").tabs("option","selected"); 
     alert("The index of the current tab is " + current_index); 
    }); 
}); 
</script> 
</head> 
<body> 
<button id="button">Click me</button> 

<div id="tabs"> 
    <ul> 
     <li><a href="/buildFirstTab">First Tab</a></li> 
     <li><a href="/buildSecondTab">Second Tab</a></li> 
     <li><a href="/buildThirdTab">Third Tab</a></li> 
    </ul>  
</div> 

</body> 
</html>