网站换肤

/*换肤*/
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>
原文地址:https://www.cnblogs.com/duanfuying/p/8966231.html