又遇到颜色主题变化，这次使用了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. javascript学习笔记 - 引用类型 RegExp

    四 RegExp 格式: var expression = / pattern / flags; 1.flags 为标志.分别为g.i.m. g:表示全局模式.即模式将匹配所有的字符串,而不是在发现第 ...

  2. git命令综合

    Git 是一个很强大的分布式版本控制系统.它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势.Git常用操作命令:1) 远程仓库相关命令检出仓库:$ git clone git: ...

  3. ubuntu服务器与本地文件传输

    ubuntu SSH 连接.远程上传下载文件 博客分类: Ubuntu   安装 SSH(Secure Shell) 服务以提供远程管理服务 sudo apt-get install ssh SSH ...

  4. 设计模式（Java随笔）—装饰模式

    装饰模式(Decorator Pattern):为已有功能动态地添加更多功能的一种方式Attach additional responsiblities to an object dynamicall ...

  5. 【CF739B】Alyona and a tree（树上差分，二分，树形DP）

    题意:给出一棵有根树,树上每个点.每条边都有一个权值. 现在给出“控制”的定义:对一个点u,设点v在其子树上,且dis(u,v)≤av,则称u控制v. 要求求出每个点控制了多少个点 n (1 ≤ n  ...

  6. net6：用户添加到角色和移出角色，角色的创建与删除等Roles与Membership的使用

    原文发布时间为:2008-07-30 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

  7. javascript 函数重载另一种实现办法

    最近在读javascript忍者 感受下jquery作者 john Resig对于js的独到见解. 先上代码: function addMethod(object,name,fn){ var old ...

  8. 20深入理解C指针之---程序的栈和堆

    一.程序在内存中的存储分段: 程序段主要包括:code段.data段.内核段.堆段和栈段 1.code段: 1).存储程序汇编后程序指令 2).此段中的数据是只读的 3).不能用于存储变量,可以存储常 ...

  9. 更改 terminal 開啟時，預設的路徑

    echo "cd /media" >> ~/.bashrc open a new terminal (ctrl + alt + t)

  10. Python Challenge 第五关

    进入第五关,一张图和一行提示: pronounce it.右键源代码,只有一行注释: <!-- peak hell sounds familiar ? --> peak hell 听起来熟 ...