<!DOCTYPE html> <html lang="en"> <head> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <script src="jquery.cookie.js"></script> <link rel="stylesheet" href="css/default.css"> <link rel="stylesheet" href="css/skin_01.css" id='cssfile'> <script type="text/javascript"> $(function () { $('#skin ul li').click(function () { // this.id=$(this).attr('id') $('#'+this.id).addClass('checked').siblings().removeClass('checked'); //这个可以单做Input中的radio使用 $('#cssfile').attr('href',"css/"+this.id+".css"); //这里可以通过设置link的href属性来覆盖 $.cookie('mycssskin',this.id,{path:'/',expires:10}); }); var cookie_skin=$.cookie('mycssskin'); if(cookie_skin){ $('#'+cookie_skin).addClass('checked')//当前li元素被选中 .siblings().removeClass('checked'); $('#cssfile').attr('href',"css/"+cookie_skin+".css"); $.cookie('mycssskin',cookie_skin,{path:'/',expires:10}); } }); </script> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="main"> <div id="skin"> <ul> <li title="紫色" id='skin_01' class='skin_01 checked'></li> <li title="红色" id='skin_02' class='skin_02 '></li> <li title="蓝色" id='skin_03' class='skin_03'></li> <li title="绿色" id='skin_04' class='skin_04'></li> <li title="黄色" id='skin_05' class='skin_05'></li> <li title="粉色" id='skin_06' class='skin_06'></li> </ul> </div> <div class="hello"> <div class='item'><a href="javascript:;" class='title'>时事新闻</a></div> <div class='item'><a href="javascript:;" class='title'>娱乐新闻</a></div> </div> </div> </body> </html> <!-- 问题是下面2 个样式的位置不能调 用ul li 作为父布局 div中的a最为子布局定位，发现2个会重合 得用上面的div最为父布局 下面的div最为子布局才行 问题2打钩的时候发现有边距。 通过设置padding和图片大小怎么也去不掉，坑爹的是发现阿里的图片自身带有边距 问题3 ' "的问题 有要嵌入的话，最后直接用" -->
*{margin:0;padding: 0} #main{position: absolute;left:50%;top:100px;width: 200px;margin-left: -100px;} #skin{position: relative;} #skin ul li{float: left; list-style: none;margin-right: 5px;} .skin_01{ background:#13227a;} .skin_02{ background:#d81e06;} .skin_03{ background:#1296db;} .skin_04{ background:#1afa29;} .skin_05{ background:#f4ea2a;} .skin_06{ background:#d4237a;} /*通过给每一个li设置背景色*/ #main .hello{clear: both;position: absolute;top:50px;left:-10px;} #main .item {display: inline;} #main .item a{text-decoration: none;width: 100px;height: 40px;line-height: 40px; border: 1px solid #ccc;text-align: center;padding: 10px;} #skin li{width:20px; height: 20px;}
.checked{background:url(../image/skin_01.png);background-size:cover;} /*这是选中后的样式*/ .hello .item a{background:#13227a;} /*这是下面的标签的样式*/