编程 Javascript

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

Posted in Javascript onSeptember 20, 2016

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

现在许多后台网站都有换皮肤的效果，今天我用 jquery 写了这个效果，主要思路是改变 link 标签的 href 属性值。

html 代码如下：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8"/>
  <title>网页换肤效果</title>
  <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
  <link rel="stylesheet" type="text/css" href="css/skin_0.css" media="all" id="cssfile"/>
</head>
<body>
  <div id="skin" class="clearfix">
    <a id="skin_0" href="javascript:;" class="selected">灰色</a>
    <a id="skin_1" href="javascript:;">紫色</a>
    <a id="skin_2" href="javascript:;">红色</a>
    <a id="skin_3" href="javascript:;">蓝色</a>
    <a id="skin_4" href="javascript:;">橙色</a>
    <a id="skin_5" href="javascript:;">绿色</a>
  </div>
  <div id="news">
    <h1 class="title">时事新闻</h1>
  </div>
  <div id="game">
    <h1 class="title">游戏快报</h1>
  </div>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var $skinBtn = $('#skin > a');
$skinBtn.click(function(){
  $(this).addClass('selected').siblings().removeClass('selected');
  $('#cssfile').attr('href','css/' + this.id + '.css');
});
</script>

PS：以上是本人通过所学的 jquery 知识，随意写的一些效果。

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

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

- Author -

朱羽佳

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

动态调用CSS文件的JS代码

Jul 29 Javascript

jquery mobile动态添加元素之后不能正确渲染解决方法说明

Mar 05 Javascript

学习JavaScript设计模式之观察者模式

Apr 22 Javascript

Bootstrap入门书籍之（四）菜单、按钮及导航

Feb 17 Javascript

Jquery on方法绑定事件后执行多次的解决方法

Jun 02 Javascript

JQuery控制DIV的选取实现方法

Sep 18 Javascript

javascript 使用正则test( )第一次是 true,第二次是false

Feb 22 Javascript

js实现动态显示时间效果

Mar 06 Javascript

javascript 数据存储的常用函数总结

Jun 01 Javascript

angular bootstrap timepicker TypeError提示怎么办

Jun 13 Javascript

Vue.js用法详解

Nov 13 Javascript

vue在线动态切换主题色方案

Mar 26 Javascript

jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】

Sep 20 #Javascript

jquery实现的回旋滚动效果完整实例【附demo源码下载】

Sep 20 #Javascript

移动端使用localStorage缓存Js和css文的方法(web开发)

Sep 20 #Javascript

关于Javascript中defer和async的区别总结

Sep 20 #Javascript

javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)

Sep 20 #Javascript

javascript字符串对象常用api函数小结(连接,替换,分割,转换等)

Sep 20 #Javascript

JQuery手速测试小游戏实现思路详解

Sep 20 #Javascript