通過單擊圖像來更改CSS屬性的背景顏色

Question

我希望在用戶單擊作為圖像的顏色時，使我的內容屬性的背景色逐漸淡入另一種顏色。

我認為我將以所有錯誤的方式處理此問題，感謝您的幫助。

希望我能正確發布。 抱歉，如果沒有。 我使用瀏覽器已有很長時間了，現在才決定注冊。

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

我認為您打算使用$('#content')代替$('layout') 。

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

您可能想使用data-*屬性（例如data-color-id作為data-color-id 。

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

另外，您的小提琴缺少jQuery，並且HTML內容最好只包含<body>的內容。

在這里看到它。

Answer 2

問題：（1）將事件處理程序包裝在ready() 。 （2）將樣式設置為有效元素#content 。

工作代碼： 現場演示

的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>

腳本

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