CSS：
* {
padding:0; margin:0;
}
body {
font-size:12px;
padding:100px;
}
ul { list-style-type:none;}
ul li {
float:left;
width:15px;
height:15px;
margin-right:10px;
cursor:pointer;
display:block;
overflow:hidden;
background-image:url(../images/demo14_bg.gif);
}
#demo14_skin_1 { background-position:0 0;}
#demo14_skin_2 { background-position:-25px 0;}
#demo14_skin_3 { background-position:-50px 0;}
#demo14_skin_1.selected { background-position:0 -16px;}
#demo14_skin_2.selected { background-position:-25px -16px;}
#demo14_skin_3.selected { background-position:-50px -16px;}
.box {
width:1000px;
clear:both;
height:500px;
margin-top:30px;
border:1px solid #fff;
}
body { background:red;}
.box { background:url(../images/red.PNG);}body { background:green;}
.box { background:url(../images/green.PNG);}body { background:blue;}
.box { background:url(../images/blue.PNG);}Html：
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/demo14.css"/>
<link rel="stylesheet" type="text/css" href="css/demo14_skin_1.css" id="cssfile"/>
<script src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").click(function(){
$("#"+this.id)
.addClass("selected")
.siblings()
.removeClass("selected");
$("#cssfile").attr("href","css/"+this.id+".css");
});
});
</script>
</head>
<body>
<ul>
<li id="demo14_skin_1" class="selected"></li>
<li id="demo14_skin_2"></li>
<li id="demo14_skin_3"></li>
</ul>
<div class="box"></div>
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)