This last week I learned how to make rotating tabs on a website. You know what I’m talking about, those rotating slideshows that display the news. Unfortunately, I couldn’t find any tutorials on the subject. But since I’m sorta’ a Java redneck, rest assured, any fix of mine is nothing more than a good lookin’ hack. But it works. And so, if you want rotating tabs on your website, do as I do and employ my quick and dirty methods.
First, put the following between your <head>…</head> tags.
<script type="text/javascript" src="jquery.ui-1.5b4/jquery-1.2.4b.js"></script>
<script src="jquery.ui-1.5b4/ui.core.js" type="text/javascript"></script>
<script src="jquery.ui-1.5b4/ui.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#rotate > ul').tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 7000);
});
</script>
Then, download and unzip this into the same directory as the webpage you’re building.
Finally, somewhere in the body of your webpage, cut and past the following:
<div id="rotate">
<ul>
<li><a href="#fragment-1"><span>Section 1</span></a></li>
<li><a href="#fragment-2"><span>Section 2</span></a></li>
<li><a href="#fragment-3"><span>Section 3</span></a></li>
<li><a href="#fragment-4"><span>Section 4</span></a></li>
<li><a href="#fragment-5"><span>Section 5</span></a></li>
</ul>
<div id="fragment-1">
</div>
<div id="fragment-2">
</div>
<div id="fragment-3">
</div>
<div id="fragment-4">
</div>
<div id="fragment-5">
</div>
</div>
Put stuff in between each fragment id and it will rotate on your webpage. There you have it, super dirty, incredibly friendly.
