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对象的property和prototype是这样一种关系
Mar 24 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
VUEX-action可以修改state吗
Nov 19 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
详解PHP中的PDO类
2015/07/06 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
js中生成map对象的方法
2014/01/09 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
python修改操作系统时间的方法
2015/05/18 Python
Python编程之属性和方法实例详解
2015/05/19 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
合作意向协议书范本
2014/03/31 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技