<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页换肤</title>
<style type="text/css">
body, html { height: 100%; }
body { margin:0; }
li { list-style: none; 10px; height: 10px; border: 3px solid; float: left; border-radius: 50%; margin-left: 10px; }
div { overflow: hidden; }
.choice_one { border-color: #75E6D5; }
.choice_two { border-color: #7063A9; }
.choice_three { border-color: #CCC41E; }
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>
<ul>
<li class="choice_one"></li>
<li class="choice_two"></li>
<li class="choice_three"></li>
</ul>
</div>
<script>
$(document).ready(function(){
$(".choice_one").on("click", function(){
$(".choice_three").css({"background-color": "#CCC41E", "border-color": "#CCC41E"});
$(".choice_two").css({"background-color": "#7063A9", "border-color": "#7063A9"});
$(this).css({"background-color": "#DDD", "border-color":"#000"});
$('body').css("background-color", "#75E6D5");
});
$(".choice_two").on("click", function(){
$(".choice_one").css({"background-color": "#75E6D5", "border-color": "#75E6D5"});
$(".choice_three").css({"background-color": "#CCC41E","border-color": "#CCC41E"});
$(this).css({"background-color": "#DDD", "border-color":"#000"});
$('body').css("background-color", "#7063A9");
});
$(".choice_three").on("click", function(){
$(".choice_one").css({"background-color": "#75E6D5", "border-color": "#75E6D5"});
$(".choice_two").css({"background-color": "#7063A9", "border-color": "#7063A9"});
$(this).css({"background-color": "#DDD", "border-color":"#000"});
$('body').css("background-color", "#CCC41E");
});
})
</script>
</body>
</html>