网站换肤

/*换肤*/
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>

 

posted @ 2018-04-28 10:29  段伏英  阅读(198)  评论(0)  编辑  收藏  举报