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

Question

我想创建一个简单的网站页面，允许我的用户翻阅几个不同的数据集（有点像迷你页面）但不重新加载页面。对于每个选择，数据都可以预先加载或请求Ajax。

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

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

是否有任何干净，方便，HTML/CSS的方法可以解决这个问题？

下面是一些原型截图，显示页面的外观，以及每个侧边栏选择的变化情况。

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;
}

Answer 2

无需复杂的javascript。 看看jquery ui tabs。

我相信你不能在纯CSS中做同样的事情。 CSS中没有点击事件。