最简单的网页换肤(jQuery)

最新推荐文章于 2018-03-21 10:45:16 发布
最新推荐文章于 2018-03-21 10:45:16 发布
阅读量125 收藏 1
点赞数
文章标签： javascript xhtml ViewUI
原文链接：https://yq.aliyun.com/articles/511362
版权

 以下讲述中有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
weixin_34245749
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过jQuery实现网页换肤
weixin_49758946的博客
05-09 520
1:使用工具Viual Studi0 2015 2:网页效果:当点击页面上带有背景颜色的div标签；这个页面的背景颜色将会变为被点击div标签的背景颜色; HTML部分: 父元素类名为yin的div标签包含五个子元素div标签; Css部分 首先通过通配符设置整个页面的内外边距为零 选中div标签中带有mr的类将它的宽,高分别设置为100像素 通过类名选择各个div标签并设置它的颜色; 选中类名为yin的div标签;通过弹性布局display:flex改变div标签...
jQuery实现简单的网页换肤效果示例
10-21
主要介绍了jQuery实现简单的网页换肤效果,涉及jQuery事件响应及页面元素属性动态变换操作技巧,需要的朋友可以参考下
很简单的JQuery网页换肤
03-24
NULL 博文链接：https://meng-xsm-163-com.iteye.com/blog/1114602
【jquery】网页换肤效果
萌萌的It人 www.itmmd.com
04-29 1130
现在许多后台网站都有换皮肤的效果，今天我用 jquery 写了这个效果，主要思路是改变 link 标签的 href 属性值。 html 代码如下： DOCTYPE HTML> html lang="en-US"> head> meta charset="UTF-8"/> title>网页换肤效果title> link rel="stylesheet" type="
JQuery网页换肤
jiulingchen的专栏
05-10 224
现在介绍网页换肤 的例子已经数不胜数，自己也没有仔细研究过，刚搞遇到类似这个问题，网上查了资料解决了问题，感觉很有用，就记录了下来和大家分享一下。效果很简单，我就直接讲怎么使用的。 其中用到了jquery .cookie.js 首先是html代码： XML/HTML代码 &lt; div   id = "header_demo" &gt;    ...
锋利的jQuery-5--网页换肤
weixin_33698823的博客
11-03 82
网页换肤原理：通过调用不同的样式表文件来实现不同的皮肤，并且将切换好的皮肤计入cookie。 例子：通过点击上边的颜色设置下边显示的背景色。 html代码： &lt;!-- head部分引入的css样式,需要有个id属性，方便修改 --&gt; &lt;link href="css/skin_0.css" rel="stylesheet" type="text/css" id="...
jQuery实现的网页换肤效果示例
10-21
这个简单的示例展示了jQuery如何轻松地实现网页换肤功能。通过动态修改CSS引用，我们可以快速地切换不同的皮肤，提升网站的交互性和用户满意度。同时，这个例子也可以作为进一步学习jQuery和其他前端技术的基础，如...
jQuery之网页换肤实现代码
10-28
用jQuery做网页换肤确实是很一个很巧妙，很好的选择，这是本人在学习jQuery中学的知识，感觉很有用，写了下来，希望大家有更好的方法或者代码不足的地方请谅解，本人也是初学者啊，希望大家互相勉励互相学习。
js实现简单的网页换肤效果
10-20
JavaScript 实现网页换肤是一种常见的用户体验优化技术，它允许用户根据个人喜好选择不同的主题或颜色方案，提升网站的个性化和互动性。以下是基于标题和描述的详细知识点解析： 1. **网页换肤原理**： 网页换肤的...
jQuery实现网页换肤
09-11
通过jQuery控制控件属性的办法实现网页一键换肤，压缩包包括了jQuery，CSS。
JQuery网页换肤实现
04-27
现在介绍网页换肤的例子已经数不胜数，自己也没有仔细研究过，刚搞遇到类似这个问题，网上查了资料解决了问题，感觉很有用，就记录了下来和大家分享一下。效果很简单，我就直接讲怎么使用的。 其中用到了jquery.cookie.js
JQuery 网站换肤功能实现代码
01-19
从那以后，我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法。但最近我要写一篇如何 使用jQuery编写简单代码实现它的教程。 我将向你们逐步解说整个的过程，不仅仅因为要展示jQuery代码的简介，同时也要揭示jQuery库中的若干高级特性。 首先，代码 代码如下: $(document).ready(function() { $(‘.styleswitch’).click(function() { switchStylestyle(this.getAttribute(“rel”)); return false; }); var c = readCookie(‘style’); if
js简单实现网页换肤功能
10-20
主要为大家详细介绍了js简单实现网页换肤功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
简单的JS网页换肤示例
05-17
一个简单的网页换肤示例，采用jQuery
jQuery实现网站换肤
Yangchm92的博客
03-21 860
------------写在前面--------------第一次写微博，不知道怎么才可以更好的表述自己的观点。毕竟新人，被关注的比较少，所以，也当做自己学习过程的笔记吧。------------正文来啦--------------所用知识点：1、jQuery2、本地缓存（localStorage）3、两套不同风格的css实现方法：我们就用最简单的配置，实现原理就好。一个页面，页面上有一个切换按钮...
jQuery之网页换肤
weixin_30919235的博客
05-14 79
用jQuery做网页换肤确实是很一个很巧妙，很好的选择，这是本人在学习jQuery中学的知识，感觉很有用，写了下来，希望大家有更好的方法或者代码不足的地方请谅解，本人也是初学者啊，希望大家互相勉励互相学习。闲话少说，归入正题： 下面是代码： 首先HTML页面代码如下： 复制代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...
JQuery 网站换肤功能
weixin_33847182的博客
11-01 154
我第一次看到样式表切换器是在A List Apart或者Simple Bits，那是两个设计师最应该去的网站。 从那以后，我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法。但最近我要写一篇如何 使用jQuery编写简单代码实现它的教程。 我将向你们逐步解说整个的过程，不仅仅因为要展示jQuery代码的简介，同时也要揭示jQuery库中的若干高级特性。 首先，代码 $(documen...
jquery百度换肤
最新发布
10-28
jquery百度换肤是一种基于jQuery框架的网页换肤功能。它可以让用户在不改变网页内容的情况下，通过点击不同的皮肤按钮来改变网页的背景、字体颜色等外观效果。这种功能可以提高用户的体验感和网站的美观度。 实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值