通过单击图像来更改CSS属性的背景颜色

Question

I'm looking to have the background color of my content attribute fade to another color upon the user clicking a color which is an image. 我希望在用户单击作为图像的颜色时，使我的内容属性的背景色逐渐淡入另一种颜色。

I assume I am going about this all the wrong way and would be grateful for any help. 我认为我将以所有错误的方式处理此问题，感谢您的帮助。

I hope I post this correctly. 希望我能正确发布。 Apologies if not. 抱歉，如果没有。 I've been a browser for a long time and have only now decided to register. 我使用浏览器已有很长时间了，现在才决定注册。

http://jsfiddle.net/WhiteSlevin7/LAcFa/9/ http://jsfiddle.net/WhiteSlevin7/LAcFa/9/

<body>
<div id ="wrapper">
    <section id ="logo">
    </section>
    <section id ="header">
    </section>

    <div id="accessibility">
    <ul>
        <li><a data-color-id="1" href="#"><img src="images/red-color.jpg"></a></li>
        <li><a data-color-id="2" href="#"><img src="images/blue-color.jpg"></a></li>
        <li><a data-color-id="3" href="#"><img src="images/grey-color.jpg"></a></li>
        <li><a data-color-id="4" href="#"><img src="images/purple-color.jpg"></a></li>
    </ul>
    </div> 
    <section id="content">
        <article>
        </article>
    </section>  
    </div>

a{
    color: #ffffff;
    text-decoration: none;
    font-size: 85%;
    border: 0;
}
a:hover{
    color: #000000;
    font-size: 85%;
}
#header{
    height: 170px;
    background: url(images/banner.jpg) no-repeat center ;
    padding: 0px; 
}
#logo{
    height: 109px;
    background: #9bbdc7 url(images/logo.jpg) no-repeat center;
    border-style: none;
    padding: 0px;
}
#accessibility li {
    float: left;
    padding: 0 20px 0 0;
    list-style: none;
}
#accessibility li a {
    color: #CFCFCF;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
}

#wrapper {
    width: 960px;
    margin: 10px auto;
    text-align:left;
    min-width: auto;
}
#content {
    width: 100%; 
    background: #eff6f4;
    float: left;
    transition: background 4s linear;
    -webkit-transition: background 4s linear;
    -moz-transition: background 4s linear;
}
article{
    background: #f9f6f6;
    border: 1px solid black;
    padding: 20px;
    margin-bottom:10px;
    margin-top:10px;
}

function changeBg(currentItem) {
    var bg = 'null';
    currentItem = Number(currentItem)
    switch (+currentItem) {
        case 1 :
            bg = '#9CC8BC';
            break;
        case 2 :
            bg = '#9CA7C8';
            break;
        case 3 :
            bg = '#C8BC9C';
            break;
        case 4 :
            bg = '#C89CBD';
            break;
        default :
            bg = '#eff6f4';
    }
    $('#content').css('background', bg);
}

jQuery('#accessibility li a').bind('click', function() {
    changeBg(this.id);
    return false;
});

Answer 1

I think you meant to use $('#content') instead of $('layout') . 我认为您打算使用$('#content')代替$('layout') 。

$('#content').css('background', bg);

You may want to use a data-* attribute such as data-color-id for the id of your colors instead. 您可能想使用data-*属性（例如data-color-id作为data-color-id 。

<a data-color-id="1" href="#"><img src="images/red-color.jpg"></a>

Also, your fiddle is missing jQuery and the HTML contents should contain only the content of the <body> preferably. 另外，您的小提琴缺少jQuery，并且HTML内容最好只包含<body>的内容。

See it here. 在这里看到它。

Answer 2

Issues: (1) Wrap the event handler inside ready() . 问题：（1）将事件处理程序包装在ready() 。 (2) Set the style to valid element, #content . （2）将样式设置为有效元素#content 。

Working code: Live Demo 工作代码： 现场演示

HTML 的HTML

<div id ="wrapper">
    <section id ="logo"></section>
    <section id ="header"></section>

    <div id="accessibility">
    <ul>
        <li><a id="1" href="#"><img src="images/red-color.jpg"></a></li>
        <li><a id="2" href="#"><img src="images/blue-color.jpg"></a></li>
        <li><a id="3" href="#"><img src="images/grey-color.jpg"></a></li>
        <li><a id="4" href="#"><img src="images/purple-color.jpg"></a></li>
    </ul>
    </div> 

    <section id="content">
        <article>
        </article>
    </section>  
</div>

Script 脚本

function changeBg(currentItem) {
    var bg = 'null';
    switch (+currentItem) {
        case 1 :
            bg = '#9CC8BC';
            break;
        case 2 :
            bg = '#9CA7C8';
            break;
        case 3 :
            bg = '#C8BC9C';
            break;
        case 4 :
            bg = '#C89CBD';
            break;
        default :
            bg = '#eff6f4';
    }
    $('#content').css('background', bg);
}

jQuery(document).ready(function() {
    jQuery('#accessibility li a').on('click', function() {
        changeBg(this.id);
        return false;
    });
});

通过单击图像来更改CSS属性的背景颜色

问题描述

2 个解决方案

解决方案1
0 2013-02-10 16:20:21

解决方案2
0 已采纳 2013-02-10 16:36:52

通过单击图像来更改CSS属性的背景颜色

问题描述

2 个解决方案

解决方案1 0 2013-02-10 16:20:21

解决方案2 0 已采纳 2013-02-10 16:36:52

解决方案1
0 2013-02-10 16:20:21

解决方案2
0 已采纳 2013-02-10 16:36:52