基于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 相关文章推荐
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
vue接口请求加密实例
Aug 11 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 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
东方红 - 来复式再生机的修复
2021/03/02 无线电
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
jQuery实用基础超详细介绍
2013/04/11 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
JavaScript手机振动API
2016/06/11 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
Python实现简易端口扫描器代码实例
2017/03/15 Python
详解django三种文件下载方式
2018/04/06 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
python 常见的排序算法实现汇总
2020/08/21 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
英文版餐饮运营管理求职信
2013/11/06 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers