基于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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
最短的IE判断代码
Mar 13 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
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操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
require.js的用法详解
2015/10/20 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
详细分析JS函数去抖和节流
2017/12/05 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
详解python中sort排序使用
2019/03/23 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
如何更优雅地写python代码
2019/07/02 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
python画图常规设置方式
2020/03/05 Python
Hibernate持久层技术
2013/12/16 面试题
庆七一活动方案
2014/01/25 职场文书
公司门卫工作职责
2014/06/28 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
Go timer如何调度
2021/06/09 Golang
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS