/*换肤*/
var li = colorbtn.find('a');
li.on('click', function () {
var self = $(this);
var v = self.attr("data-val");<!DOCTYPE html<html lang="en"<head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="chrome=1,ie=edge"> <link href="skin/default/skin.css" rel="stylesheet" type="text/css" id="skin" /> <title>index</title> </head> <body> <div class="skin_select"> <ul class="dropdown-menu dropdown-caret"> <li> <a class="colorpick-btn selected" href="javascript:void(0)" data-val="default" id="default" style="background-color:#222A2D"></a> </li> <li> <a class="colorpick-btn" href="javascript:void(0)" data-val="blue" style="background-color:#438EB9;"></a> </li> <li> <a class="colorpick-btn" href="javascript:void(0)" data-val="green" style="background-color:#72B63F;"></a> </li> <li> <a class="colorpick-btn" href="javascript:void(0)" data-val="gray" style="background-color:#D0D0D0;"></a> </li> <li> <a class="colorpick-btn" href="javascript:void(0)" data-val="red" style="background-color:#FF6868;"></a> </li> <li> <a class="colorpick-btn" href="javascript:void(0)" data-val="purple" style="background-color:#6F036B;"></a> </li> </ul> </div> /*需要引入jquery.js，jquery.cookie.js，根据情况进行相应更改，思路很重要*/ <script> /*换肤*/ var skinSelect = $('skin_select');
var skinSelectA = skinSelect.find('a');
skinSelect.on('click', 'a', function () {
var self = $(this);
var v = self.attr("data-val");
switchSkin(v); self.addClass("selected");
});
var cssSkin = $.cookie("MyCssSkin");
if(cssSkin) {
switchSkin(cssSkin);
li.each(function(i,v) {
var self = $(this);
if(self.attr("data-val") === cssSkin) {
self.addClass("selected");
}
});
}
/** *
* @method 换肤
* @param {string} 当前选中的颜色值
* @return {string} 返回cookie中保存的值
*/
function switchSkin(skinName){
li.removeClass("selected");
$("#skin").attr("href", "skin/" + skinName + "/skin.css");
$.cookie("MyCssSkin", skinName, {expires: 10 });
return $.cookie("MyCssSkin");
}
</script>
</body>
</html>