Question

我正在尝试收回我的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撤回，但根本没有再出现，这里出了什么问题？

感谢。

Answer 1

首先，请注意所有潜在DIV的容器都有content类，因此它也被隐藏了。由于容器是隐藏的，因此如果您“显示”其中一个包含的元素，则无关紧要。其次，请注意“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>

Answer 2

将外部.content更改为.content-wrapper。

Answer 3

显示和隐藏都在同一时间工作。为了避免冲突（并且不隐藏然后显示用户点击同一项目两次时可见的内容），请显示您想要的内容并通过使用siblings()

选择隐藏其他内容

Working demo

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

这也将解决你给包装器div .content类的问题。

你的ul li结构也是错误的。你需要里面的标签。李必须直接来到ul。

jQuery隐藏div，用新内容显示div

3 个答案: