0

ユーザーが画像の色をクリックすると、コンテンツ属性の背景色が別の色にフェードするようにしています。

私はこれをすべて間違った方法で行っていると思います。どんな助けにも感謝します。

これを正しく投稿したいと思います。そうでない場合はお詫び申し上げます。私は長い間ブラウザを使用してきましたが、登録することを決めたのはつい最近です。

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

$('#content')の代わりに使用するつもりだったと思います$('layout')。

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

代わりに、色の IDdata-*などの属性を使用したい場合があります。data-color-id

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

また、あなたのフィドルには jQuery がなく、HTML コンテンツには<body>できればのコンテンツのみを含める必要があります。

こちらをご覧ください。

于 2013-02-10T16:20:21.827 に答える
0

問題: (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;
    });
});
于 2013-02-10T16:36:52.703 に答える