.html

<div class="child-mod child-mod-bk">

<span>背景</span>

<div class="bk-container">

<div class="bk-1" id="bk_1"></div>

</div>

<div class="bk-container-2">

<div class="bk-2 bk-container-current" id="bk_2"></div>

</div>

<div class="bk-container-3">

<div class="bk-3" id="bk_3"></div>

</div>

<div class="bk-container-4">

<div class="bk-4" id="bk_4"></div>

</div>

<div class="bk-container-5">

<div class="bk-5" id="bk_5"></div>

</div>

</div>

.js

var Dom = {

            icon_day:$('#icon_day'),

            icon_night:$('#icon_night'),

            night_button:$('#night-button'),

            bk_1:$('#bk_1'),

            bk_2:$('#bk_2'),

            bk_3:$('#bk_3'),

            bk_4:$('#bk_4'),

            bk_5:$('#bk_5'),

            DocBody:$('body')

           };

//初始化背景色相关
       	var colorArr=[
       	{value:'#fff',name:'白色'},
       	{value:'#e9dfc7',name:'纸张',id:'icon_day'},
       	{value:'#aeacad',name:'浅灰'},
       	{value:'#d8f2d7',name:'护眼'},
       	{value:'#e9dfc7',name:'夜间',id:'icon_night'}
       	]; 
           
        //白天夜晚切换
        Dom.night_button.click(function(){
        	if(Dom.icon_day.css('display')==='block'){
        		Dom.icon_day.hide();
        		Dom.icon_night.show();  				 

        		Dom.bk_1.removeClass('bk-container-current');
        		Dom.bk_2.removeClass('bk-container-current');
        		Dom.bk_3.removeClass('bk-container-current');
        		Dom.bk_4.removeClass('bk-container-current');

        		Dom.bk_5.addClass('bk-container-current');

        		Dom.DocBody.css('background','#323d4f');
         		Dom.font_container.show();  
        	}else{
        		Dom.icon_day.show();
        		Dom.icon_night.hide();

        		Dom.bk_1.removeClass('bk-container-current');
        		Dom.bk_3.removeClass('bk-container-current');
        		Dom.bk_4.removeClass('bk-container-current');
        		Dom.bk_5.removeClass('bk-container-current');

        		Dom.bk_2.addClass('bk-container-current');

        		Dom.DocBody.css('background','#e9dfc7');
        		Dom.font_container.show();

        	}
        }); 
 		// 背景点击切换
 		Dom.bk_1.click(function(){
 			//当前背景色处于被选定的状态，之前被选定的背景色（在本地储存）处于待选定状态,并且背景色也变成选定状态颜色
 			Dom.bk_1.addClass('bk-container-current');
 			Dom.DocBody.css('background',colorArr[0].value);

 			Dom.bk_2.removeClass('bk-container-current');
 			Dom.bk_3.removeClass('bk-container-current');
 			Dom.bk_4.removeClass('bk-container-current');
 			Dom.bk_5.removeClass('bk-container-current');
 		});
 		Dom.bk_2.click(function(){
 			Dom.bk_2.addClass('bk-container-current');
 			Dom.DocBody.css('background',colorArr[1].value)

 			Dom.bk_1.removeClass('bk-container-current');
 			Dom.bk_3.removeClass('bk-container-current');
 			Dom.bk_4.removeClass('bk-container-current');
 			Dom.bk_5.removeClass('bk-container-current');

 			Dom.icon_day.show();
 			Dom.icon_night.hide();
 		});
 		Dom.bk_3.click(function(){
 			Dom.bk_3.addClass('bk-container-current');
 			Dom.DocBody.css('background',colorArr[2].value)

 			Dom.bk_1.removeClass('bk-container-current');
 			Dom.bk_2.removeClass('bk-container-current');
 			Dom.bk_4.removeClass('bk-container-current');
 			Dom.bk_5.removeClass('bk-container-current');
 		});
 		Dom.bk_4.click(function(){
 			Dom.bk_4.addClass('bk-container-current');
 			Dom.DocBody.css('background',colorArr[3].value)

 			Dom.bk_1.removeClass('bk-container-current');
 			Dom.bk_2.removeClass('bk-container-current');
 			Dom.bk_3.removeClass('bk-container-current');
 			Dom.bk_5.removeClass('bk-container-current');
 		});
 		Dom.bk_5.click(function(){
 			Dom.bk_5.addClass('bk-container-current');
 			Dom.DocBody.css('background',colorArr[4].value)

 			Dom.bk_1.removeClass('bk-container-current');
 			Dom.bk_2.removeClass('bk-container-current');
 			Dom.bk_3.removeClass('bk-container-current');
 			Dom.bk_4.removeClass('bk-container-current');

 			Dom.icon_day.hide();
 			Dom.icon_night.show();
 		});