jquery - 在事件时滑入的站点中创建多个 "views"

Question

我的目标是拥有一个具有多个“ View ”或“面板”(或任何您想要的称呼)的网站，每个 View 在宽度方向占据整个视口(viewport)，无论它们在高度方向需要多少空间。所有 View 都将包含在一个 div 中，当单击固定标题上的按钮以激活该 View 时，它会向左或向右滑动以“更改 View ”。如果可能(虽然不是必需的)，每个 View 都应该独立于其他 View 滚动，以便在返回到先前事件的 View 时，它将滚动到相同的位置。尽管这不是 100% 必要的。我想象这一切看起来像这样:

当然，最简单的方法(这是我现在的方法)是将每个面板设置为 100% 宽度和固定的左侧位置(即 0%、100%、200%)等)，然后在单击关联按钮时相应地为每个单独面板的左侧位置设置动画。

但是，我正在尝试将其简化，这样与其固定每个面板的位置并为每个面板设置动画，不如将它们紧挨着坐在更大的容器中，容器是单个元素那会四处滑动。

现在，每个面板都设置了 width:100%;职位:相对； display:inline-block;，但出于某种原因，它们都位于彼此下方而不是彼此相邻。容器设置为 position:relative;，没有设置宽度。

Here's a fiddle进行演示。

Answer 1

您可以使用 ul li我尝试过的结构与您想要达到的效果完全相同: 变化是您可以从 <a> 控制它们链接。

HTML :

<div id="panelContainer" style="position:relative;">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><<</a>
<ul>
  <li style=" background-color:red;">SLIDE 1</li>
  <li style=" background-color:green;">SLIDE 2</li>
  <li style=" background-color:blue;">SLIDE 3</li>
</ul>
    <div id="1Panel" class="panel" align="center" style=" background-color:green;"></div>
    <div id="2Panel" class="panel" align="center" style="background-color:red;"></div>
    <div id="3Panel" class="panel" align="center" style="background-color:blue;"></div>
</div>

还有我在 JSFIDDLEm over here 中提到的 CSS、JavaScript