jQuery实现的网页换肤效果示例


Posted in Javascript onSeptember 20, 2016

本文实例讲述了jQuery实现的网页换肤效果。分享给大家供大家参考,具体如下:

现在许多后台网站都有换皮肤的效果,今天我用 jquery 写了这个效果,主要思路是改变 link 标签的 href 属性值。

html 代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8"/>
  <title>网页换肤效果</title>
  <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
  <link rel="stylesheet" type="text/css" href="css/skin_0.css" media="all" id="cssfile"/>
</head>
<body>
  <div id="skin" class="clearfix">
    <a id="skin_0" href="javascript:;" class="selected">灰色</a>
    <a id="skin_1" href="javascript:;">紫色</a>
    <a id="skin_2" href="javascript:;">红色</a>
    <a id="skin_3" href="javascript:;">蓝色</a>
    <a id="skin_4" href="javascript:;">橙色</a>
    <a id="skin_5" href="javascript:;">绿色</a>
  </div>
  <div id="news">
    <h1 class="title">时事新闻</h1>
  </div>
  <div id="game">
    <h1 class="title">游戏快报</h1>
  </div>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var $skinBtn = $('#skin > a');
$skinBtn.click(function(){
  $(this).addClass('selected').siblings().removeClass('selected');
  $('#cssfile').attr('href','css/' + this.id + '.css');
});
</script>

PS:以上是本人通过所学的 jquery 知识,随意写的一些效果。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
Bootstrap表单布局
Jul 19 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 #Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 #Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 #Javascript
关于Javascript中defer和async的区别总结
Sep 20 #Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 #Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 #Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 #Javascript
You might like
PHP 日期加减的类,很不错
2009/10/10 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
详解vue-cli 接口代理配置
2017/12/13 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
django框架cookie和session用法实例详解
2019/12/10 Python
python关于调用函数外的变量实例
2019/12/26 Python
Python API len函数操作过程解析
2020/03/05 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
直接有效的自我评价
2014/01/11 职场文书
法律专业求职信
2014/05/24 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
Python使用openpyxl模块处理Excel文件
2022/06/05 Python