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 相关文章推荐
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 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
PHP编码转换
2012/11/05 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
jquery 插件学习(五)
2012/08/06 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
jQuery实现checkbox的简单操作
2017/11/18 jQuery
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python实现list由于numpy array的转换
2018/04/04 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
财务会计求职信范文
2015/03/20 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
oracle重置序列从0开始递增1
2022/02/28 Oracle