0

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>

Edited by Nick Evan: Fixed formatting

2
Contributors
1
Reply
3
Views
5 Years
Discussion Span
Last Post by stbuchok
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.