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

I want to create a simple website page that allows my users to flip through a few different sets of data (kind of like mini-pages) but without reloading the page. The data could all be preloaded or requested with Ajax for each selection.

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

I tried using Bootstrap to create Tabs, but the first screen would never disappear.

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

I'm not aware of any other way to do this, other than with complicated Javascript that sets visibility to invisible.

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

Are there any clean, convenient, HTML/CSS-only ways to go about this?

有没有干净,方便,HTML / CSS的方法来解决这个问题?

Below, are some prototype screenshots of what the page would look like, and how it changes with each sidebar selection.

下面是一些关于页面外观的原型截图,以及它随每个侧边栏选择的变化。

2 个解决方案

#1

You could do it without the use of JavaScript if you are willing to make the data sets change upon hovering the menu, instead of clicking it. Here's a JSFiddle: http://jsfiddle.net/n8wF4/. It's quite ugly, but it works...

如果您愿意在悬停菜单时更改数据集而不是单击它,则可以在不使用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;
}

#2

no need to have complicated javascript. Have a look at jquery ui tabs.

无需复杂的javascript。看看jquery ui标签。

I believe you can't do the same thing in pure CSS. There are no click events in CSS.

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