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


Posted in Javascript onMarch 03, 2011

---------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
Javascript 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
jquery中实现简单的tabs插件功能的代码
Mar 02 #Javascript
基于jQuery的简单的列表导航菜单
Mar 02 #Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 #Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 #Javascript
jquery一句话全选/取消全选
Mar 01 #Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 #Javascript
jquery中实现标签切换效果的代码
Mar 01 #Javascript
You might like
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
php自定文件保存session的方法
2014/12/10 PHP
PHP导入导出Excel代码
2015/07/07 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
js 函数性能比较方法
2020/08/24 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
详解Python的Django框架中的通用视图
2015/05/04 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
python中reload重载实例用法
2020/12/15 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
介绍一下Java中的Class类
2015/04/10 面试题
销售实习自我鉴定
2013/12/07 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
教师远程培训心得体会
2016/01/09 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
用Python生成会跳舞的美女
2022/01/18 Python