基于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

　　推荐阅读

　　jQuery boxy弹出层插件中文演示及使用讲解

使用该jQuery插件要想使用该jQuery插件，需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector"，例如："a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些>>>详细阅读

本文标题：基于Jquery的$.cookie()实现跨越页面tabs导航实现代码

地址：http://www.17bianji.com/kaifa2/JS/24863.html

1/2 1