通过单击图像更改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属性的背景颜色

回答

相关问题