又遇到颜色主题变化，这次使用了jquery+css，使用了函数传值，而不是之前网站换肤改变link的方法。

首先是设置好颜色主题后，点击改变页面颜色主题。（需要自行导入jquery.js后查看效果）

直接贴代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/JavaScript" src="js/jquery.js"></script>

</head>

<style>

    div section{

        width: 30px;

        height: 30px;

        margin: 10px;

        display: inline-block;

    }

    div section:nth-of-type(1){

        background-color: #177cb0;

    }

    div section:nth-of-type(2){

        background-color: #db5a6b;

    }

    div section:nth-of-type(3){

        background-color: #008000;

    }

    div section:hover{

        cursor:pointer;

    }

</style>

<body>

    <div>

        <section onclick="blue()"></section>

        <section onclick="red()"></section>

        <section onclick="green()"></section>

    </div>

    <center>

        <h2 style="display:inline-block;">颜色主题jquery变换</h2>

        <form action="" id="simpleCalc">

            <span>input：</span><input type="text" required><br><br>

            <button id="calc">确认</button>

        </form>

        <span id="result"></span>

    </center>

    <script>

      //设置默认颜色主题

        $(document).ready(function(){

            blue();

        });

        // 点击单个换色

        function blue(){

            change("#177cb0");

        }

        function red(){

            change("#db5a6b");

        }

        function green(){

            change("#008000");

        }

        //设置需要改变颜色的元素及其样式

        function change(colo){

            $("#calc").css("background-color", colo);

            $("h2, span").css("color", colo);

            $("input").css("color", colo);

            $("input[type=text]").focus(function(){$(this).css("outline", "none")});

            $("input[type=text]").focus(function(){$(this).css("border", "2px solid " + colo)});

            $("input[type=text]").blur(function(){$(this).css("border", "1px solid gray")});

        }

    </script>

</body>

</html>

下一篇贴即时变化颜色主题（通过input输入颜色值进行改变）的代码。

如有错误，请您指正！

jquery+css实现网页颜色主题变换（只改变已设置好的几种颜色主题）的更多相关文章

  1. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  2. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. jQuery+css+div--一些细节详解

    (一).首先.让我们认识一下最基本普通的alert()弹出框!(改变alert()提示弹出框的样式) 我们在写html或是jsp页面的时候,谁都不希望自己精心设计,且非常美观的页面颜色布局被破坏掉吧! ...

  5. jQuery中常用网页效果应用

    一.常用网页效果应用 1.表单应用 表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用 例:获取和失去焦点改变样式 首先,在网页中创建一个表单,HTML代码如下 <form actio ...

  6. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  7. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  8. css+div网页设计（一）--基础知识

    css是网页制作不可缺少的部分,我会用三篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一 ...

  9. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

随机推荐

  1. php isset()与empty()详解

    bool isset(mixed var);[;mixed var[,...]] 这个函数需要一个变量名称作为参数,如果这个变量存在,则返回true,否则返回false. 也可以传递一个由逗号间隔的变 ...

  2. 分区脚本(fdisk)

    #!/bin/bash echo "np w" | fdisk /dev/sdc && mkfs -t /dev/sdc1

  3. BZOJ-2049 [SDOI2008]洞穴勘测

    LCT模版题.... #include <cstdlib> #include <cstdio> #include <cstring> #include <al ...

  4. 算法复习——背包dp

    1.01背包 二维递推式子: 代码: ;i<=n;i++) ;x--) ][x-w[i]]+c[i],f[i-][x]); ][x]; printf("%d",f[n][m] ...

  5. [解决方案][错误代码：0x80070002]IIS7及以上伪静态报错404

    故障现象:DTCMS开启伪静态功能,VS2010预览正常,发布到IIS后报错404.0错误 (WIN7,WIN8,SERVER2008).模块IISWebCore通知MapRequestHandler ...

  6. [AHOI2008]逆序对（dp）

    小可可和小卡卡想到Y岛上旅游,但是他们不知道Y岛有多远.好在,他们找到一本古老的书,上面是这样说的: 下面是N个正整数,每个都在1~K之间.如果有两个数A和B,A在B左边且A大于B,我们就称这两个数为 ...

  7. SPOJ CIRU The area of the union of circles

    You are given N circles and expected to calculate the area of the union of the circles ! Input The f ...

  8. Object,String,StringBuffer,StringBuilder,System,Runtime,Date,Math介绍及用法(API)

    1       Object对象 面向对象的核心思想:“找合适的对象,做适合的事情”. 合适的对象: 自己描述类,自己创建对象. sun已经描述了好多常用的类,可以使用这些类创建对象. API(App ...

  9. 05深入理解C指针之---指针声明和解引

    该系列文章源于<深入理解C指针>的阅读与理解,由于本人的见识和知识的欠缺可能有误,还望大家批评指教. 一.指针声明: 1.声明普通变量:“数据类型 + 空格 +  变量名 + :”实现普通 ...

  10. 30深入理解C指针之---字符串和数组

    一.字符串与数组 1.定义:使用字符数组表示字符串 2.特征: 1).可以直接使用字符串字面量初始化字符数组 2).声明后,赋值就只能使用字符串操作函数strcpy函数赋值 3).可以使用数组的一一赋 ...