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>

这很有效，直到我开始定位无序列表。当我这么做时，它仍然可以正常工作：

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

但是，如果我添加另一行，那么......

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

...只有可点击的最后一个链接。为什么那一行css打破了菜单？

Answer 1

在最后一个链接的图片上修复结束标记：/>而不是,>

$(document).ready

$('#link1').trigger('click');

一切正常，或者问题超出了您的描述。看看这个：http://jsfiddle.net/fVE4m/

包含元素定位时链接中断

1 个答案: