Jump to content

Content not loading in tabs


kaosjon

Recommended Posts

Hi i am having a little trouble with my jquery tabs, for some reason it loads the first tab content, but when i select another tab the content is not displayed. When i try to go back to the first tab it doesnt load either.

 

Here is the html

 

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

 

 

Here is the javascript

 

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

 

Any Ideas, Thanks

Link to comment
https://forums.phpfreaks.com/topic/251039-content-not-loading-in-tabs/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.