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

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

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

是否有任何干净,方便且仅限HTML/CSS的方法来解决此问题?

以下是该页面的外观以及每个侧边栏选择如何变化的一些原型屏幕截图。

最佳答案

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

10-05 20:47
查看更多