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 相关文章推荐
动态调用CSS文件的JS代码
Jul 29 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
js实现动态显示时间效果
Mar 06 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
Vue.js用法详解
Nov 13 Javascript
vue在线动态切换主题色方案
Mar 26 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函数)
2006/10/09 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
Yii2如何批量添加数据
2016/05/17 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
深入理解node.js http模块
2018/01/24 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
用Python设计一个经典小游戏
2017/05/15 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python实现的栈(Stack)
2018/01/26 Python
python中单下划线_的常见用法总结
2018/07/10 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
python实现车牌识别的示例代码
2019/08/05 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
AJax面试题
2014/11/25 面试题
策划总监岗位职责
2014/02/16 职场文书
股东协议书范本
2014/04/14 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
复兴之路展览观后感
2015/06/02 职场文书
网吧员工管理制度
2015/08/05 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang