HTML:
<div id="overlay_weekPrize">
<div class="prizePopupBanner">
</div>
<div id="weeklyPrizeImageBanner"><!--the big banner images/weeklyPrizeImageBanner-->
<div id="week1"><img src="images/bts/bts_overlay_weekly_prize_week1.png" alt="week prize" /></div>
<div id="week2" class="inactive_banner"><img src="images/bts/bts_overlay_weekly_prize_week2.png" alt="week prize" /></div>
<div id="week3" class="inactive_banner"><img src="images/bts/bts_overlay_weekly_prize_week3.png" alt="week prize" /></div>
<div id="week4" class="inactive_banner"><img src="images/bts/bts_overlay_weekly_prize_week4.png" alt="week prize" /></div>
<div id="week5" class="inactive_banner"><img src="images/bts/bts_overlay_weekly_prize_week5.png" alt="week prize" /></div>
</div>
<div id="weeklyPrizeBlocksWrapper"><!--the outer vector box-->
<ul id="weeklyPrizeBlockThumb">
<li class="active"> <img src="images/开发者_JAVA百科bts/bts_overlay_wp_box_thumbw1_active.jpg" alt="Week1" id="week1" />
<p class="text"> </p>
</li>
<li> <img src="images/bts/bts_overlay_wp_box_thumbw2_active.jpg" alt="Week2" id="week2" />
<p class="text"> </p>
</li>
<li> <img src="images/bts/bts_overlay_wp_box_thumbw3_active.jpg" alt="Week3" id="week3" />
<p class="text"> </p>
</li>
</ul>
<ul id="weeklyPrizeBlockThumb">
<li> <img src="images/bts/bts_overlay_wp_box_thumbw4_active.jpg" alt="Week4" id="week4" />
<p class="text"> </p>
</li>
<li> <img src="images/bts/bts_overlay_wp_box_thumbw5_active.jpg" alt="Week5" id="week5" />
<p class="text"> </p>
</li>
</ul>
</ul>
</div>
JavaScript:
var currentID=$('div#weeklyPrizeActiveBlock').find('span').html();
$('#weeklyPrizeImageBanner div').hide(); // Hide All Banner DIV's
$('#weeklyPrizeImageBanner').find('div[id^='+currentID+']').show();
$('ul#weeklyPrizeBlockThumb li').removeClass('active');
$('ul#weeklyPrizeBlockThumb').find('li[id^='+currentID+']').addClass('active');
var activePrize=$("div#weeklyPrizeActiveBlock").find('img[id^='+currentID+']').attr('src');
$('ul#weeklyPrizeBlockThumb li').find('img[id^='+currentID+']').attr("src", activePrize);
$('ul#weeklyPrizeBlockThumb li').click(function()
{
$('ul#weeklyPrizeBlockThumb li').removeClass('active'); //Remove Class Active from LI
$(this).addClass('active'); //Active Image Thumb
var imgID = $(this).find('img').attr('id'); //Find Thumb Image ID
$('#weeklyPrizeImageBanner div').hide(); // Hide All Banner DIV's
$('#weeklyPrizeImageBanner').find('div[id^='+imgID+']').show(); //Show Current Banner
var activeSrc=$('div#weeklyPrizeActiveBlock').find('img[id^='+imgID+']').attr('src');
$("div#weeklyPrizeInActiveBlock>img").each(function(index){
var k= $(this).attr('src');
index1="week"+index;
$('ul#weeklyPrizeBlockThumb li').find('img[id^='+index1+']').attr('src',k);
})
$(this).find('img').attr("src", activeSrc);
}
);
What is happening is. The jQuery is not working on the second set of li
s. They don't respond to the click. This is only happening on IE7. Rest of the browsers are working absolutely fine.
EDIT: I tried changing the id to class. but it still didn't work. I tried changing the name of the second id and reconfiguring the script. Still didn't work. The problem lies somewhere else.
First of all, you really should correct your markup by dropping those duplicate IDs. Then add var
to index1 = "week" + index;
That's it.
See more about the issue here: http://ragrawal.wordpress.com/2007/10/25/top-5-reasons-why-ie7-is-complaining-about-your-javascript/
Your code uses one id on multiple elements. This will make the browser behave undefined. Please make your HTML validate, then it will probably work.
精彩评论