说明：该插件通过单击设置的链接或按钮自由切换网页的CSS来改变网页的外观，非常方便！
官方链接：http://www.kelvinluck.com/assets/jquery/styleswitch/toggle.html
JS下载： http://www.ijquery.cn/js/stylesheetToggle.js
预览： http://www.ijquery.cn/study/demo/stylesheetToggle
打包下载： http://www.ijquery.cn/study/demo/ ... tylesheetToggle.zip
参数说明：
[code]
//绑定元素进行切换
$.stylesheetSwitch(this.getAttribute('rel'));
return false;
或者
//单击一个元素进行切换
$.stylesheetToggle();
return false;
[/code]
图片展示：
JS引用代码：
[js]
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/stylesheetToggle.js"></script>
<script>
$(function () {
//初始化
$.stylesheetInit();
//使用Toggle功能进行样式单的切换。
$('#toggler').bind('click', function() {
$.stylesheetToggle();
return false;
});
//切换为指定的style
$('.styleswitch').bind('click', function() {
$.stylesheetSwitch(this.getAttribute('rel'));
return false;
});
});
</script>
[/js]
HTML代码：
[html]
<div>
<div id="container">
<p>使用Toggle功能进行样式单的切换。</p>
<p><a id="toggler" href="#">Toggle</a></p>
<p>切换为指定的style。</p>
<ul>
<li><a href="#" rel="style1">styles1</a></li>
<li><a href="#" rel="style2">styles2</a></li>
<li><a href="#" rel="style3">styles3</a></li>
</ul>
</div>
</div>
[/html]
CSS代码：
[css]
<link rel="stylesheet" type="text/css" href="css/style1.css" title="style1" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style2.css" title="style2" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style3.css" title="style3" media="screen" />
[/css]
三个CSS代码分别如下：
[css]
.container {background: #fff;}
.container {background: #abc;}
.container {background: #def;}
[/css]