利用样式文件,使网页能够更换不同的主题风格,这个只是简单的小列子,更换了背景图,和字体颜色,更换主题的基本原理是这样的。通过更改,link标签里的href属性,加载不同的样式文件。这里还用到了一款JQuery插件--cookie 确保用户更换完主题后,刷新页面主题不变。
有个小技巧:就是将不同主题的样式文件名与所选按钮的id名称相同,这样利于操作。
例如:id='skin_0' 那么文件夹中需要有一个skin_0.css文件
html代码:html>
Change backgrounIMG- 大黄蜂
- 擎天柱
- 海贼王
- 高达
- 超梦
JQuery代码:$(function() {
$('#skin li').click(function() {
switchSkin(this.id)
});
var cookie_skin = $.cookie('MyCssSkin');
if (cookie_skin) {
switchSkin(cookie_skin);
}
});
function switchSkin(skinName) {
$('#cssfile').attr('href', 'css/' + skinName + '.css');
$.cookie('MyCssSkin',skinName,{path:'/',expires:10});
//$.cookie('MyCssSkin',skinName,{path:'/',expires:10});
}