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 の 1 行がメニューを壊すのはなぜですか?

4

1 に答える 1

0
  1. 最後のリンクの画像の終了タグを修正します。/>代わりに,>
  2. $(document).ready内部$(document).readyは変に見えるので、最後に移動$('#link1').trigger('click');する必要があります。
  3. すべてが正常に機能するか、問題があなたが説明したものから外れています。これをチェックしてください：http://jsfiddle.net/fVE4m/
于 2013-09-20T15:44:39.817 に答える