宝哥软件园

jQuery实现简单的网页换肤效果示例

编辑:宝哥软件园 来源:互联网 时间:2021-09-07

本文实例讲述了jQuery实现简单的网页换肤效果。分享给大家供大家参考,具体如下:

这里有四个文件: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/XHTML 1/DTD/XHTML 1-Transitional。' DTD ' html标题标题标题皮肤切换演示/title!-引用百度加拿大的jquery -脚本语言=' JAVAScript ' type=' text/JAVAScript ' src=' http :http://libs。百度。com/jquery/1。9 .1/jquery。量滴js /脚本链接href='蓝色。CSS ' id=' skincss ' rel='样式表type='text/css'/脚本类型='text/javascript' $(文档)。就绪(函数(){ //切换皮肤$(“# skin _ list”).change(function(){ skin _ name=$(this)).val()“skin _ skin _ name”.css' $('#skincss ').attr('href ',skin _ href)});});/剧本/头像/床头柜!-皮肤列表- div皮肤列表:选择id='skin_list '选项值='蓝色'蓝色/option选项值='绿色'绿色/option选项值='红色'红色/option/select/div/ul Li今天/li li心情/li li不错/li /ul /div/body/html重点只有一个,就是那几行Java脚本语言代码。为了让大家看到全貌,所以将整个超文本标记语言代码贴了出来。

2、蓝色。钢性铸铁

li { color:blue}3、绿色。钢性铸铁

li { color:green}4、red.css

li { color:red}可能有网友觉得一句话还搞毛钢性铸铁文件,这里是以小见大,见笑了。^_^

5、截图如下:

更多关于jQuery相关内容感兴趣的读者可查看本站专题: 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

更多资讯
游戏推荐
更多+