编程 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 相关文章推荐

(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享

Jan 24 Javascript

Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例

Aug 28 Javascript

利用js制作html table分页示例(js实现分页)

Apr 25 Javascript

JS JQUERY实现滚动条自动滚到底的方法

Jan 09 Javascript

javascript与jquery动态创建html元素示例

Jul 25 Javascript

JS打印组合功能

Aug 04 Javascript

jQuery判断是否存在滚动条的简单方法

Sep 17 Javascript

bootstrap下拉列表与输入框组结合的样式调整

Oct 08 Javascript

JS 设置Cookie 有效期检测cookie

Jun 15 Javascript

vue实现点击当前标签高亮效果【推荐】

Jun 22 Javascript

快速解决vue在ios端下点击响应延时的问题

Aug 27 Javascript

ES6小技巧之代替lodash

Jun 07 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