这几天学习JQuery。发现一个很好的例子。
代码为：
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var $li = $("#skin li");
$li.click(function () {
switchSkin(this.id);
});
//获取cookie
var cookie_skin = $.cookie("MyCssSkin");
if (cookie_skin) {
switchSkin(cookie_skin);
}
});
function switchSkin(skinName) {
$("#" + skinName).addClass("selected").siblings().removeClass("selected");
$("#cssfile").attr("href", "css/" + skinName + ".css");
$.cookie("MyCssSkin", skinName, { path: '/', expires: 10 });//设置cookie;
}
</script>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<%--这里通过JQuery方法修改href链接--%>
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
</head>
<body>
<form id="form1" runat="server">
<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>
</form>
</body>
CSS文件：
1 *{ 2 margin:0px; 3 padding:0px; 4 } 5 body { 6 font-family: Verdana, Arial, Helvetica, sans-serif; 7 font-size: 12px; 8 } 9 #div_side_0,#div_side_1 10 { 11 float:left; 12 width:120px; 13 height:450px; 14 } 15 #skin 16 { 17 margin:10px; 18 padding:5px; 19 width:210px; 20 padding-right:0px; 21 list-style:none; 22 border: 1px solid #CCCCCC; 23 overflow:hidden; 24 } 25 #skin li{ 26 float:left; 27 margin-right:5px; 28 width:15px; 29 height:15px; 30 text-indent:-999px; 31 overflow:hidden; 32 display:block; 33 cursor:pointer; 34 background-image:url(theme.gif); 35 } 36 #skin_0{ 37 background-position:0px 0px; 38 } 39 #skin_1{ 40 background-position:15px 0px; 41 } 42 #skin_2{ 43 background-position:35px 0px; 44 } 45 #skin_3{ 46 background-position:55px 0px; 47 } 48 #skin_4{ 49 background-position:75px 0px; 50 } 51 #skin_5{ 52 background-position:95px 0px; 53 } 54 #skin_0.selected{ 55 background-position:0px 15px !important; 56 } 57 #skin_1.selected{ 58 background-position:15px 15px !important; 59 } 60 #skin_2.selected{ 61 background-position:35px 15px !important; 62 } 63 #skin_3.selected{ 64 background-position:55px 15px !important; 65 } 66 #skin_4.selected{ 67 background-position:75px 15px !important; 68 } 69 #skin_5.selected{ 70 background-position:95px 15px !important; 71 } 72 .title 73 { 74 cursor:pointer;} 75 h1{ 76 margin:10px; 77 padding:10px 20px; 78 width:60px; 79 color:#ffffff; 80 font-size:14px; 81 } 82 a:link { 83 text-decoration: none; 84 color: #333333; 85 } 86 a:visited { 87 color: #333333; 88 text-decoration: none; 89 } 90 a:hover { 91 color: #000000; 92 text-decoration: underline; 93 }
CSS
skin_0.css:
h1{ background:#999999; }
skin_1.css:
h1{ background:#BB3BD9; }
skin_2.css:
h1{ background:#E31559; }
skin_3.css:
h1{ background:#08BECE; }
skin_4.css:
h1{ background:#FBA60A; }
skin_5.css:
h1{ background:#AFD400; }
1.在此例子中通过改变<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />中href的属性。使得点击不同颜色的按钮，来改变网站的背景色。
2.此例子中通过CSS文件(background-position:0px 0px)来控制获取
这张图片的特定的位置来达到选中颜色的效果。
3.通过jquery.cookie来设置cookie。当下次再打开网页时任然保持之前的效果。
总结:通过对此例子的认真研究。以后项目中后台管理可以利用此方法来对前台页面的样式风格改变。
整理文件供下载。
jQuery还有很多好玩的例子。以后分享。