In my web site I have a jquery tab. When clicked a tab I want to show a div which writes loading [ <div class="loading"><p>Loading...</p></div> ] and hide it when the clicked tab content is shown. Is there a way to do this? Thanks.

My code is below.

$(function() {

var $tabs = $('#tabs').tabs();



.ui-tabs { margin-left:200px  } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0;  }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative;  border-bottom: 0 !important; padding: 0; white-space: nowrap;  }

.ui-tabs .ui-tabs-panel {  border-width: 0;  background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }

li.ui-tabs-selected                 {

padding-bottom: 4px;
background: #ffffff;
border-top: 2px solid #4cc5f7;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
margin-top: 0;
color: #000000;
font-weight: bold;



<div id="tabs">
<ul class="nav-content" >
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>

<div id="tabs-1">

<div class="loading"><p>Loading...</p></div>
tab 1

<div id="tabs-2">
<div class="loading"><p>Loading...</p></div>

tab 2

<div id="tabs-3">

<div class="loading"><p>Loading...</p></div>
tab 3