0

divを撤回してから、クリックしたリンクに基づいて新しいコンテンツを表示しようとしています。

HTML：

          <div id="menu">
    <ul>
                <a href="#" title="content_1" alt="about" class="menu"><li>about</li></a>
                <a href="#" title="content_2" alt="contact" class="menu"><li>contact</li></a>
                <a href="#" title="content_3" alt="cv" class="menu"><li>cv</li></a>
            </ul>
        </div>

       <div class="content">
            test
        <div id="content_1" class="content">
            content1
        </div>
        <div id="content_2" class="content">
            content2
        </div>
        <div id="content_3" class="content">
            content3
        </div>
    </div>

JS：

<script type="text/javascript">
        $(document).ready(function(){
            $("a.menu").click(function() {
                var clicked = $(this).attr('title');
                $(".content").hide('slide', {direction: 'right'}, 1000);
                $("#"+clicked).show('slide', {direction: 'left'}, 1000);
            });
        });
    </script>

CSS：

.content {
position: absolute;

left:303px;
top: 200px;
width: 100%;

margin-top: 200px;
background: #6c7373;

 }

#content_1, #content_2, #content_3 {
display: none;
 }

何が起こりますか：divは撤回されますが、まったく再表示されません。ここで何が問題になっていますか？

ありがとう。

4

3 に答える 3

2

最初に、可能性のあるすべての DIV のコンテナーにcontentクラスがあるため、それも非表示になっていることに注意してください。コンテナは非表示になっているため、含まれている要素の 1 つを「表示」しても問題ありません。次に、"hide" ステートメントと "show" ステートメントはどちらも非表示の要素に適用されるため、競合状態になることに注意してください。非表示操作へのコールバックでアイテムを表示するか、非表示から除外することをお勧めします。

<div class="content_wrapper"> <!-- give it a different class -->
        test
    <div id="content_1" class="content">
        content1
    </div>
    <div id="content_2" class="content">
        content2
    </div>
    <div id="content_3" class="content">
        content3
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $("a.menu").click(function() {
            var clickedID = '#' + $(this).attr('title');
            $(".content:not(" + clickedID +")").hide('slide', {direction: 'right'}, 1000);
            $(clickedID).show('slide', {direction: 'left'}, 1000);
        });
    });
</script>
于 2013-03-09T03:38:35.277 に答える
1

アウター.contentを に変更.content-wrapper。

于 2013-03-09T03:28:56.323 に答える
1

表示と非表示は同時に機能します。競合を回避するには (ユーザーが同じ項目を 2 回クリックした場合に表示されるコンテンツを非表示にしてから表示するのではなく)、目的の項目を表示し、他の項目を非表示にするには、siblings()

ワーキングデモ

$("a.menu").click(function() {
    var clicked = $(this).attr('title');
    $("#"+clicked).show(1000).siblings().hide(1000);
});

これにより、ラッパー div に .content のクラスも指定したという問題も解決されます。

また、ul li 構造が間違っています。li 内に a タグが必要です。li は ul の直後に来なければなりません。

于 2013-03-09T03:36:18.677 に答える