jquery.cookie用法-实现tabs跨页面
摘要:jQuery cookie是个很好的cookie插件,基本的方法如下 example $.cookie(’name’, ‘value’); 设置cookie的值,把name变量的值设为value example $.cookie(’name’, ‘value’, {expires: 7, path: ‘/’, domain: ‘
jQuery cookie是个很好的cookie插件,基本的方法如下
example $.cookie(’name’, ‘value’);设置cookie的值,把name变量的值设为value
example $.cookie(’name’, ‘value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});新建一个cookie 包括有效期 路径 域名等
example $.cookie(’name’, ‘value’);新建cookie
example $.cookie(’name’, null);
删除一个cookie
下面给大家介绍一个例子很好的使用jquery cookie()
大家在开发中也许会遇到这样一个问题,
tabs怎么能实现跨页面呢?
这样我们可以用jquery cookie来解决这个问题
代码如下:
---------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 -----------------------------------
<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>
这样就可以实现tabs跨页面