無刷新樣式切換jq插件styleswitch

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

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

首先，需要插入jquery.js，并且在網(wǎng)頁上引用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樣式名，然后將其設(shè)置有狀態(tài)，如果cookie不存在，則不進(jìn)行操作，當(dāng)點(diǎn)擊切換按鈕時，就設(shè)置cookie為切換的style名稱，然后將該style設(shè)置為有效。