jQuery - 关闭/打开选项卡的选项卡式导航问题
过去几周我一直在研究选项卡式导航的想法。我对 Javascript 或 jQuery 不感兴趣，所以它们正在慢慢地融合在一起。
我有两个最后的调整要做，我目前不知道如何实现这一点。其中包括：
1) 当我单击选项卡 2（第 4 项）上的 Google 链接并访问 Google 时，我希望当用户在浏览器中单击“后退”时，选项卡 2 仍然完全打开，并且所有内容都处于打开状态。列表项已加载。
2) 当您最初单击选项卡 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>
非常感谢这里的任何帮助或指示。我真的很感激。
I've been working on a tabbed navigation idea for the past few weeks. I'm not hot with Javascript or jQuery so it's been slowly coming together.
I have 2 final tweaks to make to it and I'm currently not sure how to achieve this. These include:
1) When I click the Google link on Tab 2(Item 4) and visit Google, I'd like it if when the user clicks "back" in the browser that Tab 2 is still fully open with all the list items loaded.
2) I'd also like it when you initially click the Google link that Tab 2 doesn't close.
I would really appreciate any help at all with this.
The JSFiddle can be found here: http://jsfiddle.net/mcgarriers/RXkyC/ - I found the Google link didn't seem to work in JSFiddle, but it's a good way to break up the code.
And my Full Code is here:
<!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>
Many thanks for any help or pointers here at all. I really appreciate it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
将最新选择的选项卡存储在 cookie 中。
需要 cookie 插件
查看更多此处
Store the latest selected tab in a cookie.
Requires cookie plugin
see more here