0

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/

<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;
});
4

2 回答 2

0

I think you meant to use $('#content') instead of $('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.

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

See it here.

于 2013-02-10T16:20:21.827 回答
0

Issues: (1) Wrap the event handler inside ready(). (2) Set the style to valid element, #content.

Working code: Live Demo

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;
    });
});
于 2013-02-10T16:36:52.703 回答