jQuery学习笔记——网页换肤

来源：互联网发布：mac闪讯怎么用编辑：程序博客网时间：2024/05/17 08:59
<!--作者：1377378268@qq.com时间：2017-08-16描述：实现网页换肤功能。再次刷新后不清除更换的样式--><html><head><meta charset="UTF-8"/>    <title>网页换肤</title><link href="css/default.css" rel="stylesheet" type="text/css" />    <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />    <!--   引入jQuery --><script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script><!--   引入jQuery的cookie插件 --><script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){var $li =$("#skin li");$li.click(function(){switchSkin( this.id );});var cookie_skin = $.cookie( "MyCssSkin");if (cookie_skin) {switchSkin( cookie_skin );}});function switchSkin(skinName){ $("#"+skinName).addClass("selected")                 //当前<li>元素选中  .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中$("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤$.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });}</script></head><body>    <ul id="skin"><li id="skin_0" title="灰色" class="selected">灰色</li><li id="skin_1" title="紫色">紫色</li><li id="skin_2" title="红色">红色</li><li id="skin_3" title="天蓝色">天蓝色</li><li id="skin_4" title="橙色">橙色</li><li id="skin_5" title="淡绿色">淡绿色</li></ul>    <div id="div_side_0"><div id="news">    <h1 class="title">时事新闻</h1></div>    </div>    <div id="div_side_1"><div id="game"><h1 class="title">娱乐新闻</h1></div>    </div>    </body></html>
效果：
阅读全文
0 0