Javascript 使用jQuery'；饼干'；在网站上维护选定选项卡的步骤
有人能解释一下我是如何在整个网站上使用所选选项卡的吗 以下是我当前JSFIDLE格式的代码： 如果点击了Tab2，并且点击了指向谷歌的链接，我仍然希望在返回该页面时该选项卡保持打开状态 有人能解释一下我是如何做到这一点的吗 我在此附上我的代码以供参考：Javascript 使用jQuery'；饼干'；在网站上维护选定选项卡的步骤,javascript,jquery,cookies,tabs,tabbed,Javascript,Jquery,Cookies,Tabs,Tabbed,有人能解释一下我是如何在整个网站上使用所选选项卡的吗 以下是我当前JSFIDLE格式的代码： 如果点击了Tab2，并且点击了指向谷歌的链接，我仍然希望在返回该页面时该选项卡保持打开状态 有人能解释一下我是如何做到这一点的吗 我在此附上我的代码以供参考： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htm
<!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="tabs">
<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>
</div>
</body>
</html>
符合XHTML1.0标准的严格模板
$（函数（）{
var超时=[]，
nTimeouts=0；
//一个辅助函数，允许多个LI元素
//淡入淡出或上下滑动
功能衰减（ele、延迟）{
var$$=$（ele），$n=$$.next（）；
//切换活动类
$$.toggleClass（“活动”）；
//清除所有仍在等待的超时
而（nTimeouts--）{
clearTimeout（超时[nTimeouts]）；
}
//确保下一个元素存在并具有正确的节点类型
//一个无序的列表，又称“UL”
如果（$n.length&&$n[0].nodeName=='UL'）{
nTimeouts=$（'li'，$n）.length；
$（'li'，$n）。每个（函数（i）{
//确定是使用淡入淡出效果还是使用快速淡出效果
//滑动效应
//缓存这个
var_this=$（this）；
超时[i]=设置超时（函数（）{
延迟？_this.fadeToggle（'slow'）：_this.slideToggle（'fast'）；
}，400*i）；
});
}
}
//从窗口对象检索URL参数并允许
//用于按名称自定义查询参数请求
函数getParameterByName（名称）{
name=name.replace（/[\[]/，'\\\['）。replace（/[\]]/，'\\\]'）；
var regexS='[\\？&]'+name+'=（[^&\\]*）；
var regex=新的RegExp（regexS）；
var results=regex.exec（window.location.href）；
如果（结果===null）{
返回false；
}否则{
返回组件（结果[1]。替换（/\+/g'）；
}
}
//这是一个jQuery事件，用于控制
//通过使用类来减少代码，可以在页面上创建选项卡
$（'a'，'.tabs'）。单击（函数（e）{
//e、 预防默认值（）；
$（'.tabs ul li'）.hide（）；
//检查其他选项卡上的锚定链接是否包含
//类“活动”淡出UL列表项
var$ca=$（'a.active'，'a.tabs'）；
如果（$ca.length）{
//将当前选择的选项卡与刚才单击的选项卡进行对比，
//如果它们是相同的，代码就在这里结束！
if（$（this.parent（）.attr（'id'）==$ca.parent（）.attr（'id'））{
返回false；
}
淡出度（$ca，假）；
}
淡出（这是真的）；
});
//检查URL查询字符串，如果存在选项卡哈希，我们可以
//在所选选项卡上强制单击事件
//
//例如。http://www.example.com/my-page.html#tab2
var query=getParameterByName（'tab'）；
if（查询！==false）{
document.getElementById（查询）[0]。单击（）；
}
});
身体{
字体系列：Arial；
字体大小：13px；
线高：16px；
}
.标签a{
背景色：#dedede；
颜色：#5656；
显示：块；
边缘底部：5px；
填充：5px 8px；
文字装饰：无；
}
.tabs ul{
利润率：0.10px；
填充：0；
}
李先生{
背景色：#eee；
边框：1px实心#ccc；
颜色：#1A1A；
显示：无；
边界半径：5px；
边缘底部：1px；
填充物：5px10px；
}
- 一,
- 二,
- 一,
- 二,
- 三,
非常感谢您的指点。您首先需要设计一种机制，允许您通过编程方式选择选项卡。例如，在jQueryUITabs实现中，这是通过方法实现的。您还需要一种读取当前所选选项卡的方法。例如：
var selected = $tabs.tabs('option', 'selected');
然后在页面事件中将所选选项卡的值存储在cookie中。在页面加载事件中，从cookie中读取值并选择相应的选项卡。感谢您的帮助，kgiannakakis。不幸的是，我的Javascript技能很差。你有没有可能给我一些示例代码？我会非常感激的。