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 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
vue-cli2.9.3 详细教程
2018/04/23 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
Python单链表简单实现代码
2016/04/27 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
python进行两个表格对比的方法
2018/06/27 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
Python assert关键字原理及实例解析
2019/12/13 Python
python链表类中获取元素实例方法
2021/02/23 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
30岁生日感言
2014/01/25 职场文书
党支部承诺书范文
2014/03/28 职场文书
教师产假请假条范文
2014/04/10 职场文书
个人查摆剖析材料
2014/10/04 职场文书