Hey! I'm encountering an issue with my jquery tabs. The first tab content loads fine, but when I select another tab, the content doesn't display. Then, when I try to go back to the first tab, it doesn't load either.
Here's the HTML code:
<div id="content">
<div id="tabsX">
<div id="tabContent">
<ul class="tabs">
<li><a id="all" href="#all" class="all">All</a></li>
<li><a id="free" href="#free" class="free">Free</a></li>
<li><a id="paid" href="#paid" class="paid">Paid</a></li>
<li><a id="completed" href="#completed" class="completed">Completed</a></li>
<div id="filter"><select name="filterQuest">
<option>Name</option>
<option>Payout</option>
<option>Difficulty</option>
</select></div>
</ul>
<div class="tab_container">
<div id="all" class="tab_content">
asddd
</div>
<div id="free" class="tab_content">
<!--Content-->adadada
</div>
<div id="paid" class="tab_content">
<!--Content-->adad
</div>
<div id="completed" class="tab_content">
<!--Content-->adsasd
</div>
</div><!--- end tab_container--->
</div><!---end tab content--->
<br class="clear" />
</div><!--- end tabsX--->
<div id="tournament"></div><!--- end tournament--->
</div><!--- end content--->
And here is the JavaScript snippet:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Default Action
$(".tab_content").hide(); // Hide all content
$("ul.tabs li:first").addClass("active").show(); // Activate first tab
$(".tab_content:first").show(); // Show first tab content
// On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); // Remove any "active" class
$(this).addClass("active"); // Add "active" class to selected tab
$(".tab_content").hide(); // Hide all tab content
var activeTab = $(this).find("a").attr("href"); // Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); // Fade in the active content
return false;
});
});
</script>
Lastly, here's the CSS code:
@charset "utf-8";
/* CSS Document */
ul.tabs {
padding: 0;
float: left;
list-style: none;
height: 56px;
width: 100%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
border-bottom-width: 1px;
border-bottom-style: ridge;
border-bottom-color: #999;
position:relative;
}
#tabsX {
width: 800px;
padding-left: 20px;
float: left;
}
#tabsX .clear {
clear: both;
}
... (CSS continuation)