jquery網頁換膚+jquery的cookie+動態調用css樣式文件,能夠的

時間 2019-12-08

標籤 jquery 網頁 cookie 動態調用 css 樣式文件能夠欄目 JQuery 简体版

原文原文鏈接

比較具備參考性,代碼全貼(固然,還須要一張圖片須要的留個郵箱,看到就發)javascript

貼在這兒吧,修改一下css的引用位置應該能夠用css

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jqr.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery</title>
<link href="<%=request.getContextPath()%>/js/default.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/js/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
</head>
<body>
    <ul id="skin">
        <li id="skin_0" title="灰色" class="selected">灰色</li>
        <li id="skin_1" title="紫色">紫色</li>
        <li id="skin_2" title="紅色">紅色</li>
        <li id="skin_3" title="天藍色">天藍色</li>
        <li id="skin_4" title="橙色">橙色</li>
        <li id="skin_5" title="淡綠色">淡綠色</li>
    </ul>

    <div id="div_side_0">
        <div id="news">
            <h1 class="title">時事新聞</h1>
        </div>
    </div>

    <div id="div_side_1">
        <div id="game">
            <h1 class="title">娛樂新聞</h1>
        </div>
    </div>
</body>
</html>

default.csshtml

*{
    margin:0px;
    padding:0px;
}
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
#div_side_0,#div_side_1
{
    float:left;
    width:120px;
    height:450px;
    }
#skin
{
    margin:10px;
    padding:5px;
    width:210px;
    padding-right:0px;
    list-style:none;
    border: 1px solid #CCCCCC;
    overflow:hidden;
    }
#skin li{
    float:left;
    margin-right:5px;
    width:15px;
    height:15px;
    text-indent:-999px;
    overflow:hidden;
    display:block;
    cursor:pointer;
    background-image:url(theme.gif);
}
#skin_0{
    background-position:0px 0px;
}
#skin_1{
    background-position:15px 0px;
}
#skin_2{
    background-position:35px 0px;
}
#skin_3{
    background-position:55px 0px;
}
#skin_4{
    background-position:75px 0px;
}
#skin_5{
    background-position:95px 0px;
}
#skin_0.selected{
    background-position:0px 15px !important;
}
#skin_1.selected{
    background-position:15px 15px !important;
}
#skin_2.selected{
    background-position:35px 15px !important;
}
#skin_3.selected{
    background-position:55px 15px !important;
}
#skin_4.selected{
    background-position:75px 15px !important;
}
#skin_5.selected{
    background-position:95px 15px !important;
}
.title
{
    cursor:pointer;}
h1{
   margin:10px;
   padding:10px 20px;
   width:60px;
   color:#ffffff;
   font-size:14px;
}
a:link {
    text-decoration: none;
    color: #333333;
}
a:visited {
    color: #333333;
    text-decoration: none;
}
a:hover {
    color: #000000;
    text-decoration: underline;
}

skin_0.cssjava

h1{
background:#999999;
}

skin_1.cssjquery

h1{
background:#BB3BD9;
}cookie

skin_2.csside

h1{
background:#E31559;
}ui

skin_3.cssthis

h1{
background:#08BECE;
}url

skin_4.css

h1{
background:#FBA60A;
}

skin_5.css

h1{
background:#AFD400;
}

jqr.js

$(function(){
    //先從cookie 中取判斷有無
    var cookie_skin = $.cookie("myCssSkin");
    if(cookie_skin){
        switchSkin(cookie_skin)
    }
    
    var $li = $("#skin li");
    $li.click(function(){
        switchSkin(this.id);
    })
    function switchSkin(skinName){
        $("#"+skinName).addClass("selected").siblings().removeClass("selected");
        //這算動態調用css文件,能夠的,我的感受用css特殊規則命名也能夠替換,留待後續
        $("#cssfile").attr("href",skinName+".css");
        //jquery.cookie 存放
        $.cookie("myCssSkin",skinName,{path:'/',expires:10});
        
    }
});