系统界面（切换主题）

1.新建两种样式

2.//HTML部分

<!-- 中间内容页 -->
<div class="row home-content noprint">
<div class='themes-box'>
<div class='themes'>
<div class="well-item" onclick="changeTheme('ui-default')">
<div class="correct"><img class="" src="<%=basePath%>resources/image/background.jpg"/></div>
<div class="opposite">
<div class="">
<div class="opposite-content">
<div class="opposite-content-text">
默认主题！
</div>
</div>
</div>
</div>
</div>
<div class="well-item" onclick="changeTheme('ui-black')">
<div class="correct"><img class="" src="<%=basePath%>resources/image/bg.jpg"/></div>
<div class="opposite">
<div class="">
<div class="opposite-content">
<div class="opposite-content-text">
黑色主题！
</div>
</div>
</div>
</div>
</div>
<%-- <div class="well-item">
<div class="correct"><img class="" src="<%=basePath%>resources/image/back.jpg"/></div>
<div class="opposite">
<div class="">
<div class="opposite-content">
<div class="opposite-content-text">
测试主题！
</div>
</div>
</div>
</div>
</div> --%>
</div>
</div>
<iframe id="iframe" name="iframe" width="100%" src="/sncp/module/home/home-content.jsp"
height="100%" frameborder="no" allowTransparency="true"
marginheight="5" marginwidth="5"> </iframe>
</div>

3.//JS部分

//点击切换按钮

function changeTheme(theme){
//var theme = $('select[name=theme]').val();
showTheme();
localStorage.setItem('theme',theme);
//var href = $('#theme-css').attr('href').split('module')[0]+'module/common/'+theme+'.css';
//location.reload();
var href = basePath()+'module/common/'+theme+'.css';
$('#theme-css').attr('href',href);
iframe.$('#theme-css').attr('href',href);
}
function showTheme(){
$('.themes-box').toggle(500);

var $animate = $('#animate');
var $opposite = $('#opposite');
$(".wrap").hover(function(){
$animate.removeClass();
$opposite.removeClass();
$animate.addClass("test");
$opposite.addClass('test2');
},function(){
$animate.removeClass();
$opposite.removeClass();
$animate.addClass("test2");
$opposite.addClass('test');
});

$(".well-item").hover(function(){
$(this).find(".correct").children().removeClass();
$(this).find(".opposite").children().removeClass();
$(this).find(".correct").children().addClass("test");
$(this).find(".opposite").children().addClass('test2');
},function(){
$(this).find(".correct").children().removeClass();
$(this).find(".opposite").children().removeClass();
$(this).find(".correct").children().addClass("test2");
$(this).find(".opposite").children().addClass('test');
});
$('body').click(function(e) {
var target = $(e.target);

// 如果#overlay或者#btn下面还有子元素，可使用
// !target.is('#btn *')
if(target.is('.theme')||target.is('.themes')){
$('.themes-box').show();
}else{
$('.themes-box').hide();
}
});

//判断:当前元素是否是被筛选元素的子元素
// jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0); };

//判断:当前元素是否是被筛选元素的子元素或者本身
jQuery.fn.isChildAndSelfOf = function(b){ return (this.closest(b).length > 0); };
$(document).click(function(event){
if($(event.target).isChildAndSelfOf('.theme')||$(event.target).isChildAndSelfOf('.themes')){
$('.themes-box').show();
}
});

$('.theme').on('click',function(){
$('.themes-box').show();
})
}