[英]jQuery - Tabbed Navigation issues with closing/opening tabs
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. 我对Javascript或jQuery并不热衷,因此一直很缓慢。
I have 2 final tweaks to make to it and I'm currently not sure how to achieve this. 我有2个最后的调整要做,但我目前不确定如何实现。 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. 1)当我单击选项卡2(项目4)上的Google链接并访问Google时,如果用户在浏览器中单击“后退”时选项卡2仍完全打开并加载了所有列表项,我希望它。
2) I'd also like it when you initially click the Google link that Tab 2 doesn't close. 2)当您最初单击选项卡2没有关闭的Google链接时,我也希望这样做。
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. 可以在以下位置找到JSFiddle: http : //jsfiddle.net/mcgarriers/RXkyC/-我发现Google链接在JSFiddle中似乎不起作用,但这是破坏代码的好方法。
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. 我真的很感激。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.