Change the background color of an attribute of CSS by the click of an image
Question
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;
});
2 answers
solution1
0 2013-02-10 16:20:21
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.
solution2
0 ACCPTED 2013-02-10 16:36:52
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;
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.