javascript - 如何创建包含可通过侧边栏切换的多页数据的页面？

Question

我想创建一个简单的网站页面，让我的用户可以在不重新加载页面的情况下浏览几组不同的数据(有点像迷你页面)。可以为每个选择预加载或使用 Ajax 请求数据。

我尝试使用 Bootstrap 创建选项卡，但第一个屏幕永远不会消失。

除了使用将可见性设置为不可见的复杂 Javascript 之外，我不知道有任何其他方法可以做到这一点。

是否有任何干净、方便、HTML/CSS 的方式来解决这个问题？

下面是一些原型(prototype)屏幕截图，展示了页面的外观，以及它如何随着每个侧边栏选择而变化。

Answer 1

如果您愿意在悬停菜单而不是单击菜单时更改数据集，则无需使用 JavaScript 即可完成此操作。 这是一个 JSFiddle:http://jsfiddle.net/n8wF4/ .这很丑陋，但它确实有效......

HTML:

<div class="menu">
    <div class="menu-item-1">item 1
        <div class="content data-set-1">Content 1</div>
    </div>
    <div class="menu-item-2">item 2
        <div class="content data-set-2">Content 2</div>
    </div>
    <div class="menu-item-3">item 3
        <div class="content data-set-3">Content 3</div>
    </div>
</div>

CSS:

.menu {
    position: relative;
}

.content {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
}

.menu-item-1:hover .data-set-1,
.menu-item-2:hover .data-set-2,
.menu-item-3:hover .data-set-3 {
    display: block;
}