开发者社区> 科技探索者> 正文

最简单的网页换肤(jQuery)

2017-11-07 1142

简介：
+关注继续查看

 以下讲述中有4个文件：skin.html、blue.css、green.html、red.html，我都放在同一目录下。

1、skin.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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

1
li {color:blue;}

3、green.css

1
li {color:green;}

4、red.css

1
li {color:red;}

   可能有网友觉得一句话还搞毛css文件，这里是以小见大，见笑了。^_^

5、截图

150217137.jpg


本文转自walker snapshot博客51CTO博客，原文链接http://blog.51cto.com/walkerqt/1221223如需转载请自行联系原作者

RQSLT

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

Web App开发 JavaScript 前端开发
jQuery网页
开发者社区 > 开发与运维 > 文章
云迁移中心
作者高分内容
更多
Using PowerCLI to build multiple VMs 2382 Redhat7 配置samba 2611 走近复杂数据库计算型软件的设计与制作(2)—数据表的设计 3057 Windows下GIt入门试验配置教程单机版 2283 域策略应用简述 1866
相关文章
时间静止不是简史
某东网页（动态）搭建(jquery)
网页编程实战三: 利用jquery实现京东网页（动态）搭建，
38 0
asing1elife
html2canvas+jQuery+SpringMVC 实现网页转图片并保存到服务器
前端使用的是 RequireJS + jQuery 后端使用的是 SpringMVC + MyBatis 涉及资料 html2canvas 官网 将转换后的图片存储服务器的参考 将网页转换为图片 下载插件包 html2canvas 目前最新版是 v-1.
2891 0
乌云上
jquery实现的让图片在网页的可视区域里四处漂浮的效果
　　本文分享给大家一个用jquery开发的图片漂浮效果。 jquery图片漂浮效果，常见的就是网页里四处漂来漂去的广告了，漂到边缘时还会反弹和拐弯。 下面来看具体的代码，先看要实现漂亮效果的这个jquery插件的源码： (function($){ $.
1523 0
桃子红了呐
jquery网页倒计时效果，秒杀，限时抢购！
1387 0
文艺小青年
网页引导：jQuery插件实现的页面功能介绍引导页效果
1665 0
技术小牛人
jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换
1874 0
文艺小青年
推荐25个强大的 jQuery 网页布局设计作品欣赏
1013 0
科技小毛
jquery 网页局部打印总结
最近开发过程中遇到了js局部打印的功能，在网上找相关的资料，最终找到了juery.jqprint-0.3.js 和jquery.PrintArea.js两种。    最初使用的是jquery.jqprint-0.3.js，是在弹窗的情况下使用，即使出现滚动条也依然能够把所有内容成功打印出来。
1265 0
嗯哼9925
网页插件学javascript还是jquery好啊？
1501 0
老朱教授
如何用Jquery或者插件解除网页禁用右键复制的限制（转）
1152 0
+关注
科技探索者
文章
问答
作者高分内容
更多
Using PowerCLI to build multiple VMs 2382 Redhat7 配置samba 2611 走近复杂数据库计算型软件的设计与制作(2)—数据表的设计 3057 Windows下GIt入门试验配置教程单机版 2283 域策略应用简述 1866
文章排行榜
最热
最新
1 fastjson2为什么这么快 74513
2 Meetup 报名丨 共话云原生架构升级，微服务x容器开源 Meetup 北京站来啦！ 64499
3 CVPR2021 | 视觉推理解释框架VRX：用结构化视觉概念作为解释网络推理逻辑的「语言」 63483
4 结构化总结与结构化思考之《金字塔原理》总结 56274
5 C语言进阶——指针进阶试题讲解（万字长文详解） 54924
6 实现人机协同高稳定性，阿里云5G专网IoT方案入选工信部优秀解决方案 54098
7 C语言题解 | 移除元素(多种解法) 49959
8 jasypt-spring-boot敏感信息加密解密利器使用指南 47642
9 快速开发光伏电站数字孪生运维系统（一） 44651
10 DataWorks管控台无法配置PAI引擎临时解决方案 42509
11 操作系统课程设计：新增linux驱动程序 41892
12 重构的核心-让代码保持整洁 40361
13 【Linux】-- 开发工具yum、vim、gcc、g++、gdb、make、makefile使用介绍（一） 39925
14 IoT设备数据业务价值洞察实践 37957
15 【C++修炼之路】类和对象（中）—— 筑基篇 37268
16 Hive数据倾斜的原因以及常用解决方案 33175
17 高并发编程之阻塞队列 32720
18 Spring 事务【隔离级别与传播机制】 30479
19 性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率 29486
20 计网之初识网络(理解网络传输的基本流程) 28006
1 Flink CDC 专题首发｜每天 10 分钟，解锁新一代数据集成框架 123
2 性能最大提升60%，阿里云第八代企业级实例ECS g8i正式上线 135
3 身份证实名认证接口验证不一致的原因 107
4 JVM学习.03 类加载机制 98
5 org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize instance of `object` out of START_ARRAY token 173
6 Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported 202
7 官宣｜Apache Flink 1.17 发布公告 343
8 Java智慧校园电子班牌系统源码 基于Java+springboot+vue+element-ui+mysql开发 53
9 基于阿里云eRDMA的GPU实例大幅提升多机训练性能 260
10 基于阿里云弹性GPU服务的神龙AI加速引擎无缝提升AI训练性能 204
11 重构计算，驱动视界：阿里云视觉计算思考与实践 196
12 当一座钢铁森林 变成IoT智能化数据 53
13 阿里巴巴发布《城市数字孪生能力平台总体技术要求》企业标准， 促进数字孪生互联互通生态建设 354
14 docker的安装与镜像 55
15 初识Kafka 66
16 基础篇丨链路追踪（Tracing）其实很简单 148
17 全新升级｜ECS成熟度评估与洞察，助你精准定位运维风险 120
18 网络平台挑选实名制认证API接口的注意事项 130
19 vika维格表 x 阿里云计算巢：SaaS 云端私有化部署，助力企业数字化转型 318
20 为什么 C# 可能是最好的第一编程语言 178
相关课程
更多
jQuery开发教程
15992
43
去学习
jQuery UI 速成
589
53
去学习
前端开发CSS基础
4156
21
去学习
Vue.js完全自学手册图文教程
6229
13
去学习
HTML5 新特性教程
21040
15
去学习
推荐文章
参与OCR文档自学习产品评测，赢Airpods 2 参与云效代码管理Codeup评测，赢Redmi Watch 3 参与IoT小程序框架评测，赢CHERRY机械键盘 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
23-Vue.js在前端...1506518547.pdf
立即下载
JS零基础入门教程（上册）
立即下载
低代码开发师（初级）实战教程
立即下载