Topic: jQuery | UI tabs help needed

I'm using the jQuery UI Tabs, but I can't seem to get it working.

Here's my html:

<ul class="sb_blog_tabs">
	<li><a href="#sb_recent">Most<br />Recent</a></li>
	<li><a href="#sb_viewed">Most<br />Viewed</a></li>
	<li><a href="#sb_commented">Most<br />Commented</a></li>
</ul>
<div id="sb_recent">
	<ol>
		<li><a href="">Another Random Entry</a></li>
		<li><a href="">Random Entry</a></li>
		<li><a href="">Site Progress</a></li>
		<li><a href="">Random Entry #1</a></li>
		<li><a href="">What’s a blog?</a></li>
	</ol>
</div>
<div id="sb_viewed">
	<ol>
		<li><a href="">Another Random Entry</a></li>
		<li><a href="">Random Entry</a></li>
		<li><a href="">Site Progress</a></li>
		<li><a href="">Random Entry #1</a></li>
		<li><a href="">What’s a blog?</a></li>
	</ol>
</div>
<div id="sb_commented">
	<ol>
		<li><a href="">Another Random Entry</a></li>
		<li><a href="">Random Entry</a></li>
		<li><a href="">Site Progress</a></li>
		<li><a href="">Random Entry #1</a></li>
		<li><a href="">What’s a blog?</a></li>
	</ol>
</div>

And here is my JavaScript:

<!-- JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="http://jarment.com/js/jquery-ui-personalized-1.6rc5.min.js"></script>
<script>
	$(document).ready(function(){
		$("ul.sb_blog_tabs").tab();
	});
</script>

I'm working on my homepage sidebar if you want to see it in context.

Last edited by Jim Arment (2009-01-17 15:36:50)

Re: jQuery | UI tabs help needed

FWIW, whenever I've used the jQuery tabs, I've always wrapped everything related to the tabs -- the tab menu, the various tab "panes" or "fragments" -- within a parent DIV, and then keyed my JavaScript off of that. For example, here's the HTML:

<div id="tabs">

	<ul>
		<li><a href="#tab1">Tab 1</a></li>
		<li><a href="#tab2">Tab 2</a></li>
	</ul>
	
	<div id="tab1">
	Tab 1 content goes here
	</div>
	
	<div id="tab2">
	Tab 2 content goes here
	</div>

</div>

And then the JavaScript would basically be:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.js"></script>

<script>
$(document).ready(function(){
	$("#tabs > ul").tabs();
});
</script>

In other words, I've always followed the example provided in the jQuery UI documentation (click on the "View Source" tab).

Last edited by opus (2009-01-17 21:18:19)

I feel a nostalgia for an age yet to come...

Re: jQuery | UI tabs help needed

My jQuery said .tab instead of .tabs

I hate when I miss stuff like that. Thanks for your help.

Re: jQuery | UI tabs help needed

No problem.

I feel a nostalgia for an age yet to come...