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 是你的整个元素（它包含 target1 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;
}