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

我想创建一个简单的网站页面，允许我的用户翻阅几组不同的数据（类似迷你页面），但不用重新加载页面。这些数据都可以预先加载或按照Ajax的要求进行选择。如何创建可以通过侧边栏切换的多页数据页面？

我尝试使用Bootstrap来创建制表符，但第一个屏幕永远不会消失。

我不知道有任何其他的方式来做到这一点，除了复杂的Javascript，使可见性不可见。

是否有干净，方便，HTML/CSS - 只有这样的方式？

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

Site 1

Site 2

Site 3

来源

2014-07-08 CodyBugstein

做它用JavaScript将是最简单的方法，并且很容易实现。您只需在选项卡上设置点击事件即可。如果你使用ajax来获取内容，你可以在你的ajax成功函数中用一行js来设置右面板的html – Jacob

This：http://stackoverflow.com/questions/17731457/hide-show-content -list-with-only-css-no-javascript-used可能会有帮助 – eithed

不需要有复杂的JavaScript。看看jquery ui tabs。

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

来源

2014-07-08 23:48:20 user1094553

没有点击事件，但是你可以像'：hover'那样做那样的事情。一旦光标悬停在菜单项上，相关内容将显示在右侧。纯粹的CSS，没有JS ... – Narxx

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

来源

2014-07-09 00:33:03 Narxx

有趣... :) – gitsitgo

这很酷，但我不希望它在光标离开选项时改回来，因为我希望用户能够点击信息面板 – CodyBugstein

你可以做到这一点...小提琴可能无法工作，因为角落里的'结果'元素...检查出这个版本：http://jsfiddle.net/n8wF4/1/ 。让我知道如果这回答你的问题:) – Narxx

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

回答

相关问题