0

助けてください。私はJQueryが初めてです。

私が取り組んでいるタブ ナビゲーションに jquery ツールチップを採用しました。

タブをホバーするとフローティングスパン（ツールチップ）が表示されることが前提です。ホバー成功です。しかし、コンテンツを含む div は表示されず、最初のコンテンツ div でスタックし続けます。

アドバイスをよろしくお願いします。

<script type="text/javascript">
    $(document).ready(function(){
    $('.tabcont div:not(:first)').hide();

    $('#ltabs ul li a').append('<span></span>');
    $('#ltabs ul li a').hover(
        function(){
            $(this).find('span').animate({opacity:'show', top: '-2'}, 'fast');
            var hoverTexts = $(this).attr('name');
            $(this).find('span').text(hoverTexts);
        },
        function(){
            $(this).find('span').animate({opacity:'hide', top: '-2'}, 'fast');
        });
        return false;
    });
</script>

<div id="ltabs">
                    <ul>
                        <li class="tab"><a href="#content1" name="Tab1" class="active"><h1>Tab1</h1></a></li>
                        <li class="tab"><a href="#content2" name="Tab2"><h1>Tab2</h1></a></li>
                        <li class="tab"><a href="#content3" name="Tab3"><h1>Tab3</h1></a></li>
                    </ul>
                    <div class="tabcont">
                    <div id="content1">
                    <!--LContent1-->
                        <h2>Title</h2>
                        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel quam augue, vel rhoncus arcu</p>  
                        <h2>Title</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel quam augue, vel rhoncus arcu</p>
                    </div>
                    <div id="content2">
                    <!--LContent2-->
                        <h2>Title</h2>
                        <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel quam augue, vel rhoncus arcu</p>  
                        <h2>Title</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel quam augue, vel rhoncus arcu</p>
                    </div>
                    <div id="content3">
                    <!--LContent3-->
                        <h2>Title</h2>
                        <p> 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel quam augue, vel rhoncus arcu</p> 
                        <h2>Title</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel quam augue, vel rhoncus arcu</p>
                    </div>  
                    </div>      
            </div>
4

1 に答える 1

1

これは jQuery ではなく、CSS の問題です。親に対して相対的にツールチップを配置する必要があります - DEMO

#ltabs ul li a {
    display: block;
    position: relative;
}

#ltabs ul li a span {
    position: absolute;
    left: 80px;
    top: 30px;
    z-index: 999;
}
于 2012-08-26T13:58:40.680 に答える