在过去的几周里，我一直在研究一个选项卡式导航的想法。我对 Javascript 或 jQuery 不感兴趣，所以它慢慢地融合在一起。
我有 2 个最后的调整要对其进行，我目前不确定如何实现这一点。这些包括：
1) 当我单击选项卡 2（第 4 项）上的 Google 链接并访问 Google 时，我希望当用户在浏览器中单击“返回”时选项卡 2 仍然完全打开并加载了所有列表项。
2) 当您最初单击 Tab 2 未关闭的 Google 链接时，我也喜欢它。
我真的很感激这方面的任何帮助。
JSFiddle 可以在这里找到：http: //jsfiddle.net/mcgarriers/RXkyC/ - 我发现 Google 链接在 JSFiddle 中似乎不起作用，但它是分解代码的好方法。
我的完整代码在这里：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Conforming XHTML 1.0 Strict Template</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type="text/javascript">
$(function() {
var timeouts = [],
nTimeouts = 0;
// 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');
// Clear any timeout's still waiting
while (nTimeouts--) {
clearTimeout(timeouts[nTimeouts]);
}
// Ensure the next element exists and has the correct nodeType
// of an unordered list aka "UL"
if ($n.length && $n[0].nodeName === 'UL') {
nTimeouts = $('li', $n).length;
$('li', $n).each(function(i) {
// Determine whether to use a fade effect or a very quick
// sliding effect
// cache this
var _this = $(this);
timeouts[i] = setTimeout(function() {
delay ? _this.fadeToggle('slow') : _this.slideToggle('fast');
}, 400*i);
});
}
}
// 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();
$('.tabs ul li').hide();
// 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="#" id="tab1link">Tab 1</a>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div id="tab2" class="tabs">
<a href="#" id="tab2link">Tab 2</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li><a href="http://www.google.com/">4</a></li>
</ul>
</div>
</body>
</html>
非常感谢这里的任何帮助或指示。对此，我真的非常感激。