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

我试图收回我的div，然后根据他们点击哪个链接显示新内容。jQuery隐藏div，以新内容显示div

HTML：

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收缩，但不会再出现在所有的，什么错误这里？

谢谢。

来源

2013-03-09 speak

你可以显示菜单吗？我怀疑标题与内容ID不匹配。 – tvanfosson 2013-03-09 03:32:39

加入到我的原帖 – speak 2013-03-09 03:35:29

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

来源

2013-03-09 03:28:56 pdoherty926

修正了它 - 但为什么？另外，如何让content_1在网页加载时显示？ – speak 2013-03-09 03:38:23

外部div被隐藏（因为它具有相同的类），然后再也不显示。 – pdoherty926 2013-03-09 03:41:53

您可以使用相同的代码在页面加载中显示＃content_1：'$（“＃content_1”）。show（'slide'，{direction：'left'}，1000）;' – pdoherty926 2013-03-09 03:43:23

显示和隐藏都在同一时间工作。为了避免冲突（而不是隐藏然后显示，是可见的内容，如果用户点击两次相同的项目），显示出你想要的，并通过选择它们隐藏其他siblings()

Working demo

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

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

此外你的ul结构是错误的。你需要里面的一个标签。 li必须在ul之后直接出现。

来源

2013-03-09 03:36:18 Popnoodles

谢谢您的解决方案无法正常工作但我已经通过li标签进行了修改。谢谢！ – speak 2013-03-09 03:40:55

有趣的是，它适用于我给出的jsfiddle示例！ – Popnoodles 2013-03-09 03:41:45

它说了很多关于我的糟糕代码的其余部分不是与它一起工作而是关于你的，不用担心！ – speak 2013-03-09 03:42:45

首先，请注意，所有潜在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-09 03:38:35 tvanfosson

谢谢你解决这个困惑。现在明白它好多了。 – speak 2013-03-09 03:40:25

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

回答

相关问题