如何創建可以通過側邊欄切換的多頁數據頁面？

我想創建一個簡單的網站頁面，允許我的用戶翻閱幾組不同的數據（類似迷你頁面），但不用重新加載頁面。這些數據都可以預先加載或按照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

如何創建可以通過側邊欄切換的多頁數據頁面？

回答

相關問題