Hi.
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.
<script>
$(function() {
var $tabs = $('#tabs').tabs();
});
</script>
<style>
.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;
}
</style>
<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>
</ul>
<div id="tabs-1">
<div class="loading"><p>Loading...</p></div>
tab 1
</div>
<div id="tabs-2">
<div class="loading"><p>Loading...</p></div>
tab 2
</div>
<div id="tabs-3">
<div class="loading"><p>Loading...</p></div>
tab 3
</div>
</div>