以下是 jquery控制css各个样式表切换 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery控制css各个样式表切换</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;font-size:12px;}
.demo{margin:40px auto 0 auto;text-align:left;width:920px;padding:20px;}
.colorbtn{text-align:right;height:30px;overflow:hidden;}
.colorbtn div{float:right;}
.colorbtn span,.colorbtn a{display:inline-block;height:20px;line-height:20px;float:left;overflow:hidden;margin-right:4px;text-decoration:none;}
.colorbtn a{width:40px;text-align:center;font-weight:800;color:#5e5e5e;background:#990000;color:#fff;}
#content{background:#fff;line-height:150%;font-size:85%;}
#content h2{font-size:14px;padding:30px 20px 0 20px;}
#content p{padding:10px 20px;}
</style>
<link rel="stylesheet" type="text/css" href="css/red.css" title="red" />
<link rel="stylesheet" type="text/css" href="css/blue.css" title="blue" />
<link rel="stylesheet" type="text/css" href="css/yellow.css" title="yellow" />
<script type="text/javascript" src="js/styleswitch.js"></script>
<div class="demo">
<div class="colorbtn">
<div>
<span>设置模板风格: </span>
<a href="javascript:void(0);" rel="red" class="styleswitch">红色</a>
<a href="javascript:void(0);" rel="blue" class="styleswitch">蓝色</a>
<a href="javascript:void(0);" rel="yellow" class="styleswitch">黄色</a>
</div>
</div>
<div id="content">
<h2>jquery Top排行榜或新闻列表顺序名单序号自动生成</h2>
<p>jquery Top排行榜或新闻列表顺序名单序号自动生成，制作3个演示新闻列表序号排序自动生成。jquery下载</p>
<h2>jquery 分享代码在线制作鼠标一键复制url路径功能与分享信息</h2>
<p>我们正在一个圆滑饲料部件，这将获取任何饲料和补充工具栏显示在您的博客了。您可以设置它显示你的博客从不同类别，您的最新跌倒，甚至人提你在twitter上最新的文章。</p>
<h2>常见问题解答部分动态读取数据 web / jQuery的，雅虎及谷歌文件</h2>
<p>在本教程中，我们正在一个充满活力的常见问题。与jQuery的帮助及YQL剧本，将退出在您的帐户谷歌文件共享电子表格的内容，并利用这些数据来填充与内容常见问题。</p>
</div>
</div>
</body>
</html>JS代码(styleswitch.js):
/*** Styleswitch stylesheet switcher built on jQuery* Under an Attribution,Share Alike License* By Kelvin Luck ( http://www.kelvinluck.com/ )**/
(function($){
$(document).ready(function(){
$('.styleswitch').click(function(){
switchStylestyle(this.getAttribute("rel"));
return false;
}
);
var c = readCookie('style');
if (c) switchStylestyle(c);
}
);
function switchStylestyle(styleName){
$('link[@rel*=style][title]').each(function(i){
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
}
);
createCookie('style',styleName,365);
}
}
)(jQuery);
// cookie functions http://www.quirksmode.org/js/cookies.htmlfunction createCookie(name,value,days){
if (days){
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = ";
expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+";
path=/";
}
function readCookie(name){
var nameEQ = name + "=";
var ca = document.cookie.split(';
');
for(var i=0;
i < ca.length;
i++){
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name){
createCookie(name,"",-1);
}
// /cookie functionsCSS代码(blue.css):
@charset "utf-8";.demo{background:#ABC5FB;}
.colorbtn a{background:#3366cc;color:#fff;}
#content{color:#3366cc;border:solid 1px #3366cc;}
CSS代码(red.css):
@charset "utf-8";.demo{background:#FFA4A4;}
.colorbtn a{background:#990000;color:#fff;}
#content{color:#ff0000;border:solid 1px #ff0000;}
CSS代码(yellow.css):
@charset "utf-8";.demo{background:#FFCDAB;}
.colorbtn a{background:#ff6600;color:#fff;}
#content{color:#ff6600;border:solid 1px #ff6600;}
分享到QQ
分享到微博
微信扫一扫
