基于Jquery的$.cookie()实现跨越页面tabs导航实现代码_jquery

---------tabs.js-----------------

复制代码 代码如下：

$(function(){
//初始化选择的选项卡
var on= $.cookie('current_tab');
if (on!="" && !isNaN(on))
{
$(".nav li").eq(on).addClass("on").siblings().removeClass()
}
//默认选项卡
else
{ $.cookie('current_tab', 0); }
//更改选项卡
$(".nav li").click (function(){
var current_tab = $(".nav li").index(this);
$.cookie('current_tab', current_tab);
window.location = $(this) .attr("href");
})

----------------css.css---- ------------------

复制代码代码如下：

.nav { 溢出：隐藏；高度：20px;}
.nav li { float:left;显示：内嵌； padding:3px;}
.nav li a:hover { color:yellow; }
.nav li.on { 背景：#900;颜色：#FFF;}
.nav li.on a { 颜色：#fff; }
.nav li.on a:hover { color:yellow; }
a { 文本装饰：无； }

--------------------- 1.html ---------------- -------------------

复制代码代码如下：

ontent-Type" content="text/html; charset=utf-8" />>

>
<脚本类型=“text/javascript”语言=“javascript”src=“jquery-1.4.4.min.js”>
<脚本类型=“text/javascript”语言=“javascript”src=“jquery.cookie.js”>
<脚本类型=“text/javascript”语言=“javascript”src=“tabs.js”>

<身体>

• 第一页


• 第二页


• 第三页

其他两个页面一样，文件改一下就可以了
Mark Dzone 夜猫人
来自：http://www.cnblogs.com/dzone