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该类，因此它也被隐藏了。由于容器是隐藏的，因此“显示”其中一个包含的元素并不重要。其次，请注意“隐藏”语句和“显示”语句将具有竞争条件，因为它们都将应用于被隐藏的元素。最好在隐藏操作的回调中显示该项目或将其排除在隐藏之外。

<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

显示和隐藏同时工作。为避免冲突（如果用户单击同一项目两次，则不隐藏然后显示可见的内容），显示您想要的内容并通过使用选择它们来隐藏其他内容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 回答