jquery question - addclass to element depending on active image in rotating banner
Posted
by whitman6732
on Stack Overflow
See other posts from Stack Overflow
or by whitman6732
Published on 2010-03-21T15:55:53Z
Indexed on
2010/03/21
16:01 UTC
Read the original article
Hit count: 508
I have a banner that rotates a series of three images. The active one has a display:block, while the inactive have display:none. I'm trying to match the class for the active image with an tag so that I can add an "active" class to the a tag. Having some trouble writing that function. It's adding all of the classes for each of the img elements, regardless of whether they're being displayed or not...
The html markup looks like this:
<div id="banner-area">
<div class="clearfix" id="promo-boxes-nav">
<ul id="banner-tabs">
<li>
<ul id="page-tabs">
<li><a class="t39" href="#">1</a></li>
<li><a class="t42" href="#">2</a></li>
<li><a class="t49" href="#">3</a></li>
</ul>
</li>
<li class="last"> </li>
</ul>
</div>
<div id="banner-content">
<img class="t39" src="http://localhost:8888/1.png" style="position: absolute; top: 0px; left: 0px; display: none; opacity: 0;">
<img class="t42" src="http://localhost:8888/2.png" style="position: absolute; top: 0px; left: 0px; display: block; opacity: 1;">
<img class="t49" src="http://localhost:8888/3.png" style="position: absolute; top: 0px; left: 0px; display: none;opacity: 0;">
</div>
</div>
The function in its current form looks like this:
$j(document).ready(function() {
$j('#banner-content')
.cycle({
fx: 'fade',
speed: 300,
timeout: 3000,
next: '.t1',
pause: 1
});
if($j('#page-tabs a').attr('class')) {
$j('#banner-content img').each(function() {
if($j(this).attr('display','block')) {
var bcClass = $j(this).attr('class');
}
$j('#page-tabs li a').each(function() {
if($j('#page-tabs li a').hasClass(bcClass)) {
$j(this).addClass(bcClass);
}
});
});
}
})
© Stack Overflow or respective owner