第6款插件:StyleWheetToggle——切换网页外观

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

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=6