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

基于Jquery的$.cookie()实现跨越页面tabs导航实现代码,需要的朋友可以参考下。

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

以上就是基于Jquery的$.cookie()实现跨越页面tabs导航实现代码的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程