javascript - jQuery隐藏div，以新内容显示div

我正在尝试撤消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缩回了，但根本没有出现，这是怎么回事？

谢谢。

最佳答案

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