javascript - 包含定位元素时链接会中断

Question

我有一个无序列表的链接，如下所示:

<ul id="linkwrapper">
    <li><a name="latestBlog"class="menuLinks"id="link1"href="#latestBlog"><img src="images/blog.png" /></a></li>
    <li><a name="meetings"class="menuLinks suckit"id="link2"href="#meetings"><img src="images/meetings.png" /></a></li>
    <li><a name="aboutus"class="menuLinks suckit"id="link3"href="#aboutus"><img src="images/who_we_are.png" /></a></li>
    <li><a name="contact"class="menuLinks"id="link4"href="#contact"><img src="images/contact.png" ,></a></li>
</ul>

我使用以下 JavaScript 来取消常规链接行为，并根据单击的链接显示不同的 div。

<script type="text/javascript">
$(document).ready(function(){

var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs

$(document).ready(function() {
    $('#link1').trigger('click');
});

$('#linkwrapper a').click(function(){
    var $contentDiv = $("#" + this.id + "content");

        $allContentDivs.hide(); // Hide All Divs
        $contentDiv.show(); // Show Div


    return false;        
});
});

</script>

这非常有效，直到我开始定位无序列表。当我做了这么多 css 时，它仍然工作正常:

#linkwrapper {
position:absolute;
left:175px;
}

但是如果我像这样添加另一行...

#linkwrapper {
position:absolute;
left:175px;
top:0px;
}

...只有最后一个链接是可点击的。为什么这一行 css 会破坏菜单？

Answer 1

1. 修复最后一个链接图像上的结束标记:/> 而不是 ,>
2. $(document).ready 里面的 $(document).ready 看起来很奇怪，你最好移动 $('#link1').trigger( '点击');到最后。
3. 一切正常，或者问题与您所描述的不同。看看这个:http://jsfiddle.net/fVE4m/