如果您查看this screenshot,当您单击它时,我试图在链接下显示红色图像。如果单击链接2,它将显示在链接2下。
它可以在除IE 6之外的所有专业浏览器中正常工作。当我单击IE 6中的链接时,它会加载ul的on类,但图像不会显示。
谁能看到我的代码有问题?
在此先感谢您的帮助!
这是HTML:
<ul id="slider-links">
<li class="on"><a href="#">Link 1</a><img src="img/slider-handle.png" width="316" height="42"></li>
<li><a href="#">Link 2</a><img src="img/slider-handle.png" width="316" height="42"></li>
<li><a href="#">Link 3</a><img src="img/slider-handle.png" width="316" height="42"></li>
</ul>
这是jQuery:
$("#slider-links a").click(function(){
$(this).parent().siblings(".on").removeClass("on");
$(this).parent().addClass("on");
});
这是CSS:
#slider-links li {
position: relative;
z-index: 8000;
background: #bed2d9;
border-bottom: 1px solid #69868f;
}
#slider-links li.on a {color: #dbdbdb;}
#slider-links li a {
padding: 10px 15px;
display: block;
color: #234a5b;
font-size: 16px;
font-weight: bold;
text-decoration: none;
position: relative;
z-index: 10000;
}
#slider-links li.on img {display: block;}
#slider-links img {
position: absolute;
top: -1px;
left: 0;
z-index: 9000;
display: none;
}
最佳答案
问题出在IE6,而不是您的代码。我将通过警告谁是父母以及谁是IE6中的兄弟姐妹来开始调试。