1

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

<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 会破坏菜单？

4

1 回答 1

0
  1. 修复最后一个链接图像上的结束标记：/>而不是,>
  2. $(document).ready里面$(document).ready看起来很奇怪，你最好移到$('#link1').trigger('click');最后。
  3. 一切正常，或者问题出在您所描述的范围内。看看这个：http: //jsfiddle.net/fVE4m/
于 2013-09-20T15:44:39.817 回答