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 开发中规范性的一点感想
Jun 23 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 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
javascript 学习之旅 (2)
2009/02/05 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
剖析Angular Component的源码示例
2018/03/23 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
js实现小球在页面规定的区域运动
2020/06/16 Javascript
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
wxPython实现列表增删改查功能
2019/11/19 Python
Python如何将装饰器定义为类
2020/07/30 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
2014年教师培训的自我评价
2014/01/03 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
租赁协议书范本
2014/04/22 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书