 
$(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----------------------

復(fù)制代碼代碼如下:

 
.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 -----------------------------------

復(fù)制代碼代碼如下:

 
<!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>無標(biāo)題文檔</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

您可能感興趣的文章:

相關(guān)文章

jquery實現(xiàn)選中單選按鈕下拉伸縮效果
這篇文章主要介紹了jquery實現(xiàn)選中單選按鈕下拉伸縮效果的方法,涉及jquery鼠標(biāo)事件及頁面元素樣式的動態(tài)操作技巧,該功能可用于動態(tài)顯示特定內(nèi)容(如發(fā)票打印等),需要的朋友可以參考下
2015-08-08
jquery 操作兩個select實現(xiàn)值之間的互相傳遞
本篇文章主要是對jquery操作兩個select實現(xiàn)值之間的互相傳遞進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
MVC+jQuery.Ajax異步實現(xiàn)增刪改查和分頁
這篇文章主要為大家詳細介紹了MVC結(jié)合jQuery.Ajax異步實現(xiàn)增刪改查和分頁的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05
jquery.lazyload 實現(xiàn)圖片延遲加載jquery插件
看到了淘寶產(chǎn)品介紹中,圖片是在下拉滾動條時加載,這是一個很不錯的用戶體驗。減少了頁面加載的時間了，也減輕了服務(wù)器的壓力，就查了下用JQuery..
2010-02-02
jQuery實現(xiàn)表格行上下移動和置頂效果
本文給大家分享的是一款由jQuery實現(xiàn)的表格行上下移動以及置頂效果的代碼，非常的簡單實用，這里給出了核心代碼，有需要的小伙伴可以參考下。
2015-06-06
jquery ajax return沒有返回值的解決方法
jquery ajax return沒有返回值的解決方法，需要的朋友可以參考下。
2011-10-10
jQuery常用數(shù)據(jù)處理方法小結(jié)
這篇文章主要介紹了jQuery常用數(shù)據(jù)處理方法,實例總結(jié)了trim、param、isArray、isFunction、each等jQuery常用的數(shù)據(jù)處理方法,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
解決自定義$(id)的方法與jquery選擇器$沖突的問題
最近網(wǎng)站改版，原來的js都是原生js，因為當(dāng)前比較jquery而且他的組件也比較多，使用方便，所以我們也采用了jquery但跟原來的$(id)沖突，經(jīng)過網(wǎng)絡(luò)很多人的推薦我們選擇了這個方法
2014-06-06
jQuery中:nth-child選擇器用法實例
這篇文章主要介紹了jQuery中:nth-child選擇器用法,實例分析了:nth-child選擇器功能、定義及匹配子元素或奇偶元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2014-12-12
jquery實現(xiàn)多級下拉菜單的實例代碼
多級菜單，理論上支持無限多的層級，文件結(jié)構(gòu)非常簡單的，以下是完整代碼，有需要的朋友可以參考一下
2013-10-10