無刷新樣式切換jq插件styleswitch

來源：昆明網站建設 日期：2010-07-08 閱讀： 發(fā)表評論

在網站制作過程當中,都會遇到客戶這樣的要求:希望網站的風格有多種,如紅色、藍色風格可以隨時切換,但是又不希望網站被刷新,那么styleswitch就派上用場了。

首先，需要插入jquery.js，并且在網頁上引用3種css樣式：
<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
 <link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />
 <link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" /> 
 <script type="text/javascript" src="../../jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="styleswitch.js"></script>

然后給切換的按鈕或鏈接加上如下代碼：
<a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch">styles1</a>
<a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch">styles2</a>
<a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch">styles3</a>

styleswitch.js下載

styleswitch.js基本原理說明：首先是判斷有沒有style樣式的cookie存在，如果存在的話就讀取style樣式名，然后將其設置有狀態(tài)，如果cookie不存在，則不進行操作，當點擊切換按鈕時，就設置cookie為切換的style名稱，然后將該style設置為有效。