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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
第一篇初识bootstrap
Jun 21 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
JS出现404错误原理及解决方案
Jul 01 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
PHP Pear 安装及使用
2009/03/19 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python交易记录链的实现过程详解
2019/07/03 Python
django 微信网页授权登陆的实现
2019/07/30 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
中专自我鉴定
2014/02/05 职场文书
餐厅总厨求职信
2014/03/04 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
上课说话检讨书
2015/01/27 职场文书
销售助理岗位职责
2015/02/11 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书