无刷新样式切换jq插件styleswitch

来源：昆明网站建设日期：2010-07-08 阅读：发表评论

在网站制作过程当中,都会遇到客户这样的要求:希望网站的风格有多种,如红色、蓝色风格可以随时切换,但是又不希望网站被刷新,那么styleswitch就派上用场了

在网站制作过程当中,都会遇到客户这样的要求:希望网站的风格有多种,如红色、蓝色风格可以随时切换,但是又不希望网站被刷新,那么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样式名，然后将其设置有状态，如果cookie不存在，则不进行操作，当点击切换按钮时，就设置cookie为切换的style名称，然后将该style设置为有效。