<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// A helper function that allows multiple LI elements to be either
// faded in or out or slide toggled up and down
function fadeOutItems(ele, delay) {
var $$ = $(ele), $n = $$.next();
// Toggle the active class
$$.toggleClass('active');
// Ensure the next element exists and has the correct nodeType
// of an unordered list aka "UL"
if ($n.length && $n[0].nodeName === 'UL') {
$('li', $n).each(function(i) {
// Determine whether to use a fade effect or a very quick
// sliding effect
delay ? $(this).delay(i * 400).fadeToggle('slow') : $(this).slideToggle('fast');
});
}
}
// Retrieves the URL parameters from the window object and allows
// for custom query parameter requests by name
function getParameterByName(name) {
name = name.replace(/[\[]/, '\\\[').replace(/[\]]/, '\\\]');
var regexS = '[\\?&]' + name + '=([^&#]*)';
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results === null) {
return false;
} else {
return decodeURIComponent(results[1].replace(/\+/g, ' '));
}
}
// This is the jQuery event that controls the click event for the
// tabs on the page by using a class to cut down on code
$('a', '.tabs').click(function(e) {
e.preventDefault();
// Check on the other tabs, if the anchor link contains the
// class "active" fade out the UL list items
var $ca = $('a.active', '.tabs');
if ($ca.length) {
// Check the currently selected tab against the one just clicked,
// if they are the same end the code right here!
if ($(this).parent().attr('id') === $ca.parent().attr('id')) {
return false;
}
fadeOutItems($ca, false);
}
fadeOutItems(this, true);
});
// Check the URL query string, if a tab hash is present we can
// force the click event on the selected tab
//
// Eg. http://www.example.com/my-page.html#tab2
var query = getParameterByName('tab');
if (query !== false) {
document.getElementById(query)[0].click();
}
});
</script>
<style type="text/css">
body {
font-family: Arial;
font-size: 13px;
line-height: 16px;
}
.tabs a {
background-color: #dedede;
color: #565656;
display: block;
margin-bottom: 5px;
padding: 5px 8px;
text-decoration: none;
}
.tabs ul {
margin: 0 0 10px;
padding: 0;
}
.tabs li {
background-color: #eee;
border: 1px solid #ccc;
color: #1a1a1a;
display: none;
border-radius: 5px;
margin-bottom: 1px;
padding: 5px 10px;
}
</style>
</head>
<body>
<div id="tab1" class="tabs">
<a href="#">Tab 1</a>
<ul>
<li>1</li>
<li><a href="http://www.google.com/">2</a></li>
<li>3</li>
</ul>
</div>
<div id="tab2" class="tabs">
<a href="#">Tab 2</a>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>