编程 Javascript

基于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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Document 对象的常用方法

Jul 31 Javascript

JS编程小常识很有用

Nov 26 Javascript

通过隐藏iframe实现文件下载的js方法介绍

Feb 26 Javascript

JS截取url中问号后面参数的值信息

Apr 29 Javascript

js友好的时间返回函数

Aug 24 Javascript

在线引用最新jquery文件的实现方法

Aug 26 Javascript

Bootstrap源码解读表单（2）

Dec 22 Javascript

详解javascript立即执行函数表达式IIFE

Feb 13 Javascript

JavaScript实现简单的星星评分效果

May 18 Javascript

Angular5中调用第三方库及jQuery的添加的方法

Jun 07 jQuery

JS实现简易留言板特效

Dec 23 Javascript

vue router 动态路由清除方式

May 25 Vue.js

jquery中实现简单的tabs插件功能的代码

Mar 02 #Javascript

基于jQuery的简单的列表导航菜单

Mar 02 #Javascript

jquery异步调用页面后台方法&#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