可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

jQuery 1.7.1, jQuery UI tabs. I have the following HTML representing tabs,

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

I need to show an indicator in the 'content' div container when I click or select the tab. I tried the following,

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

This is working with the following tab select code, which I execute to select a default tab when the page loads,

var $tabs = $('#tabs').tabs();
$tabs.tabs('select', 1);

But whenever i click on the tab, indicator is not displaying. Any idea why?

回答1:

You haven't call any ajax in tab selection.

if you are calling tab content by ajax that indicator will display.

I have test this with small example, added below.

<!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>

New Code with extra JQuery Plugin

<!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>

回答2:

This isn't an answer to your specific question but I used the following to achieve a similar result:

$('#loading_indicator').show();
$('#tabs').tabs({select: function(event, ui) { $('#loading_indicator').show(); },
                 load:   function(event, ui) { $('#loading_indicator').hide(); }});

回答3:

The jQuery UI Tabs widget has a specific event called beforeLoad for that.

If you look at the official jQuery UI demo for Ajax you will see how that event is used for handling errors. And it's also useful for setting content inside the tabs while loading.

Here is the working code snippet (there is just 1 important line in JS and 3 lines in HTML):

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

Notice that the loading indicator is in the HTML inside a hidden <div> and it's copied inside the tab content while loading (which will be automatically replaced as soon as tab is loaded).