在很(hěn)多(duō)網站(zhàn)尤其在一些(xiē)購物網站(zhàn)上(shàng)，展示商品的列表頁提供了許多(duō)商品，用戶可(kě)以選擇商品的展示方式如列表方式展示和(hé)櫥窗方式展示等。在本例中，将給您講述如何實現這種效果。

XHTML

切換布局 

	
	

		
		

			文章标題
		

		

			文章摘要
		

	
...

XHTML結構中，在#demo中放入了多(duō)個(gè).list，用于顯示文章标題和(hé)摘要。通(tōng)過下面的CSS來(lái)控制(zhì)外觀。

CSS

#demo{width:680px; margin:20px auto; padding:4px; background:#f7f7f7; 
border:1px solid #d3d3d3}
.list{margin:6px}
.list h3{height:26px; line-height:26px; font-size:14px}
.list p{line-height:20px}
.showblock .list{float:left; width:325px; height:100px}

我們要設置最外層的#demo樣式，使其具有(yǒu)統一外觀，包括背景色和(hé)邊框樣式。注意，我們在最後要設置一個(gè)樣式.showblock .list，控制(zhì)#demo裏的.list樣式，使其向左浮動，并設置高(gāo)度和(hé)寬度，設置.showblock其實就是設置#demo的樣式，在接下來(lái)的jQuery代碼中，你(nǐ)就會(huì)明(míng)白了。當然您可(kě)以根據需求自行(xíng)設計(jì)CSS和(hé)XHTML，本文隻是為(wèi)了演示簡單的構建了樣式和(hé)HTML結構。

jQuery

實現切換布局的原理(lǐ)其實就是，用javascript來(lái)控制(zhì)頁面顯示的樣式，當用戶點擊切換時(shí)，引用不同的CSSy樣式。請(qǐng)看下面的jQuery代碼。

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

我們使用toggle事件，它用來(lái)交替的執行(xíng)事件，使用fadeOut讓切換有(yǒu)個(gè)過渡效果，不難看出，就是通(tōng)過addClass()和(hé)removeClass()調用不同的樣式來(lái)實現不同的布局效果。

問題：如何實現分頁後，切換了布局方式，進入下一頁和(hé)上(shàng)一頁的布局方式一樣呢？

思路：可(kě)以采用cookie記錄用戶所選的布局方式，然後進入下一頁時(shí)讀取cookie值，分配布局方式等。關于cookie的使用，可(kě)以參照本站(zhàn)文章：使用jQuery操作(zuò)Cookies