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