>웹 프론트엔드 >JS 튜토리얼 >Jquery의 $.cookie()_jquery를 기반으로 하는 교차 페이지 탭 탐색을 위한 구현 코드

Jquery의 $.cookie()_jquery를 기반으로 하는 교차 페이지 탭 탐색을 위한 구현 코드

WBOY
WBOY원래의
2016-05-16 18:10:061570검색

--------tabs.js----

复제대码 代码如下:

$(function(){
//선택한 탭 초기화
var on= $.cookie('current_tab');
if (on!="" && !isNaN(on))
{
$(".nav li").eq(on).addClass("on").siblings().removeClass()
}
//기본 탭
else
{ $.cookie('current_tab', 0) }
//탭 변경
$(".nav li").click (function(){
var current_tab = $(".nav li").index(this);
$.cookie('current_tab', current_tab);
window.location = $(this) .attr("href");
})
})

---------------css.css--- ------------------
复代码 代码如下:

.nav { 오버플로:숨김; 높이:20px;}
.nav li { float:left; 표시:인라인; 패딩:3px;}
.nav li a:hover { color:yellow; }
.nav li.on { 배경:#900; color:#FFF;}
.nav li.on a { ​​color:#fff; }
.nav li.on a:hover { color:yellow; }
a { 텍스트 장식:없음; }

--------- 1.html ---------------- ------
复代码 代码如下:



<머리>

无标题文档





<본문>




其它两个页face一样,文件改一下可以了
Mark Dzone 夜猫人
来自:http://www.cnblogs.com/dzone
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.