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 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
JQuery性能优化的几点建议
May 14 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 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的安全策略
2006/10/09 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
分享3个php获取日历的函数
2015/09/25 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python的缺点和劣势分析
2019/11/19 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
《美丽的小路》教学反思
2014/02/26 职场文书
本科生就业推荐信
2014/05/19 职场文书
啤酒节策划方案
2014/05/28 职场文书
横店影视城导游词
2015/02/06 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers