Home  >  Article  >  Web Front-end  >  Implementation code for cross-page tabs navigation based on Jquery's $.cookie()_jquery

Implementation code for cross-page tabs navigation based on Jquery's $.cookie()_jquery

WBOY
WBOYOriginal
2016-05-16 18:10:061525browse

---------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 -----------------------------------
复制代码 代码如下:





无标题文档










其它两个页面一样,文件改一下可以了
Mark Dzone 夜猫人
来自:http://www.cnblogs.com/dzone
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn