jquery简单的幻灯片菜单不起作用

Question

我试图让这个面板菜单工作。我一直在努力工作几个小时，没有任何成功。我有它的部分工作。请参阅小提琴here。

我试图做的是：

1. 当您单击目标1，目标2，目标3个环节。持有这些链接的div应该滑出。现在，它只能被滑入的下一个div覆盖和隐藏。我希望它首先向左滑出，然后让下一个div滑入。

2. 点击其中一个目标链接后。然后当点击“主菜单”链接时，使下方的“目标”框（绿色，红色，黄色框）从右向左滑出并使“目标菜单”成为最初加载的目标菜单，从左侧滑入。现在，我无法得到那个“主菜单”链接来做任何事情。点击时应显示初始目标菜单。

我知道里面有很多左右的东西。但我想尽可能具体。我并不十分关心幻灯片的方向。我更关心的是让它首先工作。

<div class="main-menu"><a href="#target0">Main Menu Link</a> 
</div> 

<div id="right" id="target0"> 
This is the Target Menu<br /> 
<a href="#target1" class="panel">Target 1</a><br/> 
<a href="#target2" class="panel">Target 2</a><br/> 
<a href="#target3" class="panel">Target 3</a><br/> 

<div class="panel" id="target1" style="background:green">Target 1</div> 
<div class="panel" id="target2" style="background:red">Target 2</div> 
<div class="panel" id="target3" style="background:yellow">Target 3</div> 
</div> 

Answer 1

的＃target0是整个元素（包含目标1 TARGET2和target3）

你应该打破它自身：

<div class="main-menu"><a href="#target0" class="panel">Main Menu Link</a> 
</div> 
<div id="right" id="main"> 
    <div id="target0" class="panel active">This is the Target Menu<br /> 
     <a href="#target1" class="panel">Target 1</a><br/> 
     <a href="#target2" class="panel">Target 2</a><br/> 
     <a href="#target3" class="panel">Target 3</a><br/> 
    </div> 
    <div class="panel" id="target1" style="background:green">Target 1</div> 
    <div class="panel" id="target2" style="background:red">Target 2</div> 
    <div class="panel" id="target3" style="background:yellow">Target 3</div> 
</div> 

编辑： 要使灰色块幻灯片，你应该添加你的Panel类到它（我也添加了活动类，所以它默认显示）。你只需要它的样式

div.panel.active { 
    display:block; 
}