基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
更新时间：2011年03月03日 11:40:36 作者：
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码，需要的朋友可以参考下。
---------tabs.js-----------------
$(function(){
//init seleted tab
var on= $.cookie('current_tab');
if(on!="" && !isNaN(on))
{
$(".nav li").eq(on).addClass("on").siblings().removeClass();
}
//default tab
else
{ $.cookie('current_tab', 0); }
//change tab
$(".nav li").click(function(){
var current_tab = $(".nav li").index(this);
$.cookie('current_tab', current_tab);
window.location = $(this).attr("href");
});
})
---------------css.css----------------------
.nav { overflow:hidden; height:20px;}
.nav li { float:left; display:inline; padding:3px;}
.nav li a:hover { color:yellow; }
.nav li.on { background:#900; color:#FFF;}
.nav li.on a { color:#fff; }
.nav li.on a:hover { color:yellow; }
a { text-decoration:none; }
--------------------- 1.html -----------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" language="javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" language="javascript" src="tabs.js"></script>
</head>
<body>
<ul class="nav">
<li><a href="1.html">第一页</a></li>
<li><a href="2.html">第二页</a></li>
<li><a href="3.html">第三页</a></li>
</ul>
</body>
</html>
其它两个页面一样，文件改一下可以了
Mark Dzone 夜猫人
来自：http://www.cnblogs.com/dzone
复制代码 代码如下:
$(function(){
//init seleted tab
var on= $.cookie('current_tab');
if(on!="" && !isNaN(on))
{
$(".nav li").eq(on).addClass("on").siblings().removeClass();
}
//default tab
else
{ $.cookie('current_tab', 0); }
//change tab
$(".nav li").click(function(){
var current_tab = $(".nav li").index(this);
$.cookie('current_tab', current_tab);
window.location = $(this).attr("href");
});
})
---------------css.css----------------------
复制代码 代码如下:
.nav { overflow:hidden; height:20px;}
.nav li { float:left; display:inline; padding:3px;}
.nav li a:hover { color:yellow; }
.nav li.on { background:#900; color:#FFF;}
.nav li.on a { color:#fff; }
.nav li.on a:hover { color:yellow; }
a { text-decoration:none; }
--------------------- 1.html -----------------------------------
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" language="javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" language="javascript" src="tabs.js"></script>
</head>
<body>
<ul class="nav">
<li><a href="1.html">第一页</a></li>
<li><a href="2.html">第二页</a></li>
<li><a href="3.html">第三页</a></li>
</ul>
</body>
</html>
其它两个页面一样，文件改一下可以了
Mark Dzone 夜猫人
来自：http://www.cnblogs.com/dzone
相关文章
浅谈jquery中的each方法$.each、this.each、$.fn.each
下面小编就为大家带来一篇浅谈jquery中的each方法$.each、this.each、$.fn.each。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
这篇文章主要帮助大家轻松学习jQuery插件EasyUI，EasyUI创建树形菜单，内容很丰富，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-11-11
利用jQuery实现CheckBox全选/全不选/反选的简单代码
下面小编就为大家带来一篇利用jQuery实现CheckBox全选/全不选/反选的简单代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
本文主要是记录一个项目中用到的对输出的json进行格式化的小技巧，也是看到一位朋友分享的，这里mark一下，有需要的小伙伴也可以参考下。2014-11-11
jQuery中绑定事件bind() on() live() one()的异同
本文主要介绍了jQuery中绑定事件bind() on() live() one()的异同，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
jQuery EasyUI API 中文文档 - ProgressBar 进度条
jQuery EasyUI API 中文文档 - ProgressBar 进度条，使用jQuery EasyUI的朋友可以参考下。2011-09-09
Jquery中request和request.form和request.querystring的区别
Request.Form是获取以POST方式提交的表单数据,Request.QueryString主要是获取地址栏参数或者以Get方式提交的数据,而Request则包含以上两种方式，会在Request.QueryString和Request.Form中都查询一遍变量2015-11-11
解决jquery的datepicker的本地化以及Today问题
解决jquery的datepicker的本地化以及Today问题,需要的朋友可以参考下2012-05-05
jquery乱码与contentType属性设置问题解决方案
让人头痛的Jquery乱码问题。其实这方面文章已经很多了，但全面解决各种问题的很少，今天总结一下，方便自己也方便大家,感兴趣的朋友可以了解下哦2013-01-01
jQuery实现加入收藏夹功能，代码比较简单，兼容主流浏览器，下面给大家分享下2016-12-12
最新评论