jq页面换肤效果

<!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:;padding:}

#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;}

/*这是下面的标签的样式*/

巴特西

jq页面换肤效果

最新文章

热门文章