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


Posted in Javascript onSeptember 18, 2016

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

这里有4个文件:skin.html、blue.css、green.html、red.html,都放在同一目录下。

1、skin.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<head>
  <title>皮肤切换演示</title>
  <!--引用百度CDN的jquery-->
  <script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <link href="blue.css" id="skincss" rel="stylesheet" type="text/css"/>
  <script type="text/javascript">
    $(document).ready(function(){
      //切换皮肤
      $('#skin_list').change(function(){
        skin_name = $(this).val()
        skin_ skin_name + ".css"
        $("#skincss").attr("href", skin_href)
      });
    });
  </script>
</head>
</head>
<body>
  <!--皮肤列表-->
  <div>
    皮肤列表:
    <select id="skin_list">
      <option value ="blue">蓝色</option>
      <option value ="green">绿色</option>
      <option value ="red">红色</option>
    </select>
  </div>
  <div>
    <ul>
      <li>今天</li>
      <li>心情</li>
      <li>不错</li>
    </ul>
  </div>
</body>
</html>

重点只有一个,就是那几行JavaScript代码。为了让大家看到全貌,所以将整个html代码贴了出来。

2、blue.css

li {color:blue;}

3、green.css

li {color:green;}

4、red.css

li {color:red;}

可能有网友觉得一句话还搞毛css文件,这里是以小见大,见笑了。^_^

5、截图如下:

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

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

Javascript 相关文章推荐
javascript 常用代码技巧大收集
Feb 25 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
用js实现in_array的方法
Nov 05 Javascript
javascript实现日期格式转换
Dec 16 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
js完整倒计时代码分享
Sep 18 #Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 #Javascript
js手动播放图片实现图片轮播效果
Sep 17 #Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 #Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 #Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 #Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 #Javascript
You might like
极典R601SW收音机
2021/03/02 无线电
How do I change MySQL timezone?
2008/03/26 PHP
php 安全过滤函数代码
2011/05/07 PHP
DEFER怎么用?
2006/07/01 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
深入理解python中的select模块
2017/04/23 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python实现一个简单的ping工具方法
2019/01/31 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
django 类视图的使用方法详解
2019/07/24 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
高二美术教学反思
2014/01/14 职场文书
毕业生就业协议书
2014/04/11 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL