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动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
js使用递归解析xml
Dec 12 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
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引用效率问题分析
2012/03/23 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
python中异常报错处理方法汇总
2016/11/20 Python
浅谈python迭代器
2017/11/08 Python
详解python分布式进程
2018/10/08 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python3下载抖音视频的完整代码
2019/06/05 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
外语专业毕业生个人的自荐信
2013/11/19 职场文书
春节请假条
2014/04/11 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
促销活动计划书
2014/05/02 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
建筑工地文明标语
2014/10/09 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python