开发者社区> 科技探索者> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

最简单的网页换肤(jQuery)

简介:
+关注继续查看

 以下讲述中有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

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

相关文章
jQuery插件开发的五种形态[转]
这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细。 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课。开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多。这里我把我
2703 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1018 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
940 0
jQuery_ 绑 定事件处理器上|学习笔记
快速学习 jQuery_ 绑定事件处理器上
80 0
jquery清空表单数据
转载的文章,要明显的标志出转载地址: http://reymont.iteye.com/blog/756756 惯例: 我是温浩然: 如果同一张页面,可能需要编辑的数据不一样,我的如图下: 按钮不同,页面相同,还需要显示的数据不同,这里会由于页面的缓存问题,导致,每次点开这个页面显示的数据相同。 这不是我们想要的。这就需要清楚表单数据了。 方法如下: 注意!!!!!
1279 0
5487
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载