jQuery를 사용하여 페이지 전환하기 소개

예 보기: DEMO 데모 패키지 다운로드

XHTML

코드 복사 코드는 다음과 같습니다.

스위치 레이아웃

기사 제목

>< ;p>기사 요약

...

XHTML 구조, #demo 다중 기사 제목과 초록을 표시하기 위해 .lists가 추가되었습니다. 다음 CSS를 사용하여 모양을 제어합니다.

CSS

코드 복사 코드는 다음과 같습니다.

#demo {폭: 680px; 여백:20px 자동; 배경:#f7f7f7;
테두리:1px #d3d3d3}
.list{margin:6px}
.list h3{height:26px; line-height:26px; 글꼴 크기:14px}
.list p{line-height:20px}
.showblock .list{float:left; 높이:100px}

가장 바깥쪽의 #demo 스타일을 배경색, 테두리 스타일 등 통일된 모습으로 스타일링하고 싶습니다. 마지막에 .showblock .list 스타일을 설정하고, #demo에서 .list 스타일을 제어하고, 왼쪽으로 부동하게 만들고, 높이와 너비를 설정해야 한다는 점에 유의하세요. .showblock 설정은 실제로 #demo의 스타일을 설정하는 것입니다. . 다음 jQuery 코드에서는 이해하게 될 것입니다. 물론 필요에 따라 CSS와 XHTML을 직접 디자인할 수도 있습니다. 이 기사에서는 설명할 스타일과 HTML 구조를 간단히 구축합니다.

jQuery
전환 레이아웃을 구현하는 원칙은 실제로 사용자가 전환을 클릭하면 다양한 CSSy 스타일을 참조하기 위해 자바스크립트를 사용하는 것입니다. 아래 jQuery 코드를 참조하세요.

코드 복사 코드는 다음과 같습니다.

$(function(){
$(" #switch").toggle(function(){
$("#demo").fadeOut("fast",function(){
$(this).fadeIn("fast"). addClass(" showblock");
});
},function(){
$("#demo").fadeOut("fast",function(){
$(this) .fadeIn( "fast").removeClass("showblock");
});
})
})

대체 실행 이벤트에 사용되는 fadeOut을 사용하여 스위치에 전환 효과를 부여합니다. addClass() 및 RemoveClass()를 통해 서로 다른 스타일이 호출되어 서로 다른 레이아웃 효과를 얻는 것을 보는 것은 어렵지 않습니다.

질문: 페이지 매김 후 레이아웃 모드를 전환하고 이전 페이지와 동일한 레이아웃으로 다음 페이지로 들어가는 방법은 무엇입니까?

아이디어: 쿠키를 사용해 사용자가 선택한 레이아웃 방식을 기록하고, 다음 페이지 진입 시 쿠키 값을 읽어 레이아웃 방식 지정 등을 할 수 있습니다. 쿠키 사용에 대해서는 이 사이트의
JQuery를 사용하여 쿠키 작동 기사를 참조할 수 있습니다.