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

當用戶單擊圖像顏色時，我正在尋找內容屬性的背景顏色淡化爲另一種顏色。通過單擊圖像更改CSS屬性的背景顏色

我假設我正在做這一切錯誤的方式，並會感激任何幫助。

我希望我發佈這個正確。如果不是，請道歉。我一直是一個瀏覽器很長一段時間，現在才決定註冊。

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

來源

2013-02-10 Greg

什麼是'$（ '佈局'）'想選擇？ – Alexander 2013-02-10 16:16:05

「Html」部分中沒有'layout'這樣的東西。 NO（'layout'）會被選中。css（'background'，bg）;' – AdityaParab 2013-02-10 16:16:59

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

工作代碼：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>

腳本

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-10 16:36:52 ATOzTOA

完美無瑕。非常感謝。 – Greg 2013-02-10 16:58:32

我想你想用$('#content')而不是$('layout')。

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

您可能需要使用data-*爲data-color-id等屬性爲你的顏色的ID而不是。

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

而且，你的小提琴缺少jQuery和的HTML內容應該只包含<body>最好的內容。

See it here.

來源

2013-02-10 16:20:21 Alexander

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

回答

相關問題