jQuery 页面换肤（cookie 传值）

最新推荐文章于 2019-05-08 11:09:40 发布

原创最新推荐文章于 2019-05-08 11:09:40 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种通过HTML、CSS及jQuery实现的网站换肤功能。该方案利用不同的颜色主题来更改页面背景色，实现多样化的视觉效果。通过点击不同颜色选项，可以更换头部、导航栏及模块标题栏的背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码：

<div id="header"> 
<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>
 <div id="navigation"></div>
<div id="global_module">
<h3></h3>
<h3></h3>
</div>

CSS样式：

//skin_0
#header{
	background:#3B5998;
}
#navigation { 
	background:#3B5998;
} 
.global_module h3 { 
	background:#3B5998;
}

//skin_1
#header{
 background:#BB3BD9;
}
#navigation { 
 background:#BB3BD9;
} 
.global_module h3 { 
 background:#BB3BD9;
}

//skin_2
#header{
 background:#E31559;
}
#navigation { 
 background:#E31559;
} 
.global_module h3 { 
 background:#E31559;
}

//skin_3
#header{
 background:#08BECE;
}
#navigation { 
 background:#08BECE;
} 
.global_module h3 { 
 background:#08BECE;
}

//skin_4
#header{
 background:#FBA60A;
}
#navigation { 
 background:#FBA60A;
} 
.global_module h3 { 
 background:#FBA60A; 
}

//skin_5
#header{
 background:#AFD400;
}
#navigation { 
 background:#AFD400;
} 
.global_module h3 { 
 background:#AFD400;
}

jQuery代码：

<link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" />
<script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">

$(function () {
    //点击事件
    $("#header #skin li").click(function () {
        skin(this.id);

    });
    //获取设置的cookie名
    var cookie_skin = $.cookie("MySkin");
    if (cookie_skin) {
        skin(cookie_skin);
    }
});
function skin(skinid) {
    //先根据获取的id添加class再移除class
    $("#" + skinid).addClass("selected").siblings().removeClass("selected");
    //根据id选择link改变它的href属性以达到换肤
    $("#cssfile").attr("href", "styles/skin/" + skinid + ".css");
    //设置cookie
    $.cookie('MySkin', skinid, { expires: 7, path: '/' });
}</script>