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

我想创建一个简单的网站页面，允许我的用户在不重新加载页面的情况下浏览几组不同的数据（有点像迷你页面）。对于每个选择，都可以使用

Ajax

预加载或请求数据

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

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

有没有什么干净、方便的、HTML/CSS-唯一的方法可以做到这一点

下面是页面外观的一些原型截图，以及它如何随每个侧边栏选择而变化

---

不需要复杂的javascript。 看一看

---

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

如果您愿意在鼠标悬停菜单而不是单击菜单时更改数据集，则无需使用JavaScript即可。 这里有一个JSFIDLE:。它很难看，但它很管用

HTML:

---

用javascript实现这一点是最简单的方法，而且非常容易实现。您只需在选项卡上设置单击事件。如果您使用ajax获取内容，您可以在ajax成功函数中用一行js设置右侧面板的html。这：可能有用无点击事件，但您可以使用

：hover

这样做。光标悬停在菜单项上后，相关内容将显示在右侧。纯CSS，无JS…这很酷，但我不想在光标离开该选项时将其更改回原来的状态，因为我希望用户能够单击信息面板中的项目您可以这样做。。。小提琴可能不起作用，因为角落里有一个小小的“结果”元素。。。请检查此版本：。如果回答您的问题，请告诉我：）

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

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