jQuery 1.7.1，jQuery UI选项卡。我有以下代表标签的HTML，
<div id="tabs">
<ul>
<li><a href="t1" title="content">Gallery</a></li>
<li><a href="t2" title="content">Polls</a></li>
<li><a href="t3" title="content">Events</a></li>
</ul>
<div id="content"></div>
</div>
我需要在内容中显示一个指标＆＃39;单击或选择选项卡时的div容器。我尝试了以下内容，
HTML
<div id="content"><img id="ind" src="images/indicator.gif"
alt="Loading..." style="display:none"/></div>
的JavaScript
$.ajaxSetup({
cache:false,
beforeSend: function() {
$('#ind').show()
},
complete: function(){
$('#ind').hide()
},
success: function() {}
});
这正在使用以下选项卡选择代码，我执行该代码以在页面加载时选择默认选项卡，
var $tabs = $('#tabs').tabs();
$tabs.tabs('select', 1);
但每当我点击标签时，指示灯都不会显示。知道为什么吗？
答案 0 :(得分：4)
您没有在标签选择中调用任何ajax。
如果您通过指示符将显示的ajax调用标签内容。
我用小例子测试了这个，在下面添加。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Load Demo</title>
<link rel="stylesheet" href="demos.css">
<link rel="stylesheet" href="jquery.ui.tabs.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({
cache:false,
beforeSend: function() {
$('#ind').show()
},
complete: function(){
$('#ind').hide()
},
success: function() {}
});
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
}
});
});
</script>
</head>
<body>
<div id="content" style="border:1px solid red"><img id="ind" src="images/indicator.gif" alt="Loading..." style="display:none"/></div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Preloaded</a></li>
<li><a href="load.php?url=http://www.google.com">Tab 1</a></li>
<li><a href="load.php?url=http://www.yahoo.com">Tab 2</a></li>
<li><a href="load.php?url=http://www.msn.com">Tab 3 (slow)</a></li>
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
</div>
</body>
</html>
带有额外JQuery插件的新代码
<!DOCTYPE html>
<html lang="en">
<!--
Created using /
Source can be edited via /iwajir/8/edit
-->
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script class="jsbin" src="http://malsup.github.com/jquery.blockUI.js"></script>
<meta charset="utf-8">
<title>jQuery UI Tabs - Content via Ajax</title>
<script>
$.ajaxSetup({
cache:false,
beforeSend: function() {
$('#content').block({
message: '<img id="ind" src="images/indicator.gif" alt="Loading..." style="border: 1px solid red"/>',
css: {
width: '100%',
width: '100%',
padding: '5px',
backgroundColor: '#FFF',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
color: '#000'
}
});
},
complete: function(){
},
success: function() {}
});
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
success:function()
{
$('#content').unblock();
},
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo." );
}
}
});
});
</script>
</head>
<body>
<div id="tabs" style="position:relative">
<ul>
<li><a href="http://jsbin.com/ewoyos/2" title="content">Tab 1</a></li>
<li><a href="http://jsbin.com/imakug/3" title="content">Tab 2</a></li>
<li><a href="http://jsbin.com/ayocul" title="content">Tab 3</a></li>
</ul>
<div id="content" style="border: 1px solid red"></div>
</div>
</body>
</html>
答案 1 :(得分：1)
这不是您具体问题的答案，但我使用以下内容来获得类似的结果：
$('#loading_indicator').show();
$('#tabs').tabs({select: function(event, ui) { $('#loading_indicator').show(); },
load: function(event, ui) { $('#loading_indicator').hide(); }});
答案 2 :(得分：1)
jQuery UI Tabs小部件有一个名为beforeLoad的特定事件。
如果查看the official jQuery UI demo for Ajax，您将看到该事件如何用于处理错误。它在加载时在标签内设置内容也很有用。
这是工作代码片段（JS中只有1个重要行，HTML中有3行）：
$(function() {
$("#tabs").tabs({
beforeLoad: function( event, ui ) {
ui.panel.html($('#ind').clone()); // the only line one I added to the official sample
ui.jqXHR.fail(function() {
ui.panel.html("ERROR: Couldn't load this tab.");
});
}
});
});<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Preloaded</a></li>
<li><a href="https://rawgit.com/jquery/jquery-ui/master/tests/unit/tabs/data/test.html">Tab 1</a></li>
<li><a href="https://hub.github.com/hub.1.html">Tab 2</a></li>
<li><a href="http://google.com/not-found-ajax-content">Tab 3 (broken)</a></li>
</ul>
<div id="tabs-1">
<p>Preloaded tab content</p>
</div>
</div>
<!-- important lines below (the HTML of the loading indicator) -->
<div style="display:none">
<img id="ind" src="http://www.ajaxload.info/images/exemples/1.gif" alt="Loading..."/>
</div>
请注意，加载指示符位于隐藏<div> 内的HTML中，并且在加载时会在标签内容中复制（一旦选项卡将自动替换）已加载）。