基于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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 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
关于页面优化和伪静态
2009/10/11 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
php使用GeoIP库实例
2014/06/27 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
PHP实现事件机制的方法
2015/07/10 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
JavaScript的eval JSON object问题
2009/11/15 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
python:接口间数据传递与调用方法
2018/12/17 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
基层党员公开承诺书
2014/05/29 职场文书
课外活动总结范文
2014/07/09 职场文书
地理科学专业自荐信
2014/09/01 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
世界文化遗产导游词
2015/02/13 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL