Home  >  Article  >  Web Front-end  >  基于Jquery的$.cookie()实现跨越页面tabs导航实现代码_jquery

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

Original
2016-05-16 18:10:061403browse

---------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 [email protected]