zoukankan      html  css  js  c++  java
  • 【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 知识,随意写的一些效果。

  • 相关阅读:
    哈希表
    c++中的虚函数
    struct并不报错
    c风格的字符串
    动态数组
    常量指针和指针常量
    关于struct和typedef struct
    常量成员函数
    关于free的使用疑惑
    mutable用于修改const成员函数中的成员变量
  • 原文地址:https://www.cnblogs.com/yjzhu/p/2987147.html
Copyright © 2011-2022 走看看