CSS DIV沒有固定高度的交換？

我很好奇，如果有可能實現一個簡單的div交換使用只有CSS，如果div沒有固定的高度。我已經廣泛搜尋了一個答案，並且就這個問題提出了很少的討論。CSS DIV沒有固定高度的交換？

這個想法是有一個膨脹的啤酒清單分爲四個獨立的div，並一次只顯示其中一個。當點擊一個對應的錨點時，顯示的div會隱藏另外三個。第一個div應該在頁面加載時顯示。我對此有一些經驗，並取得了成功，但只有固定大小，因爲最重要的div會隱藏所有其他div。

這些特定的div將包含格式化表和無序列表。我不確定這是否會產生任何影響，但認爲這值得一提，以防萬一。 divs不能有固定的高度，因爲每個div的項目數量會有所不同。我還沒有編碼它作爲我不知道這是否是值得的時間投資，但產生的HTML代碼如下所示：

<div id="secondaryNav">  
    <ul> 
    <li>Link to div1</li> 
    <li>Link to div2</li> 
    <li>Link to div3</li> 
    <li>Link to div4</li> 
    </ul> 
</div> 

<div id="swappedContent"> 
    <div id="1"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
    <div id="2"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
    <div id="3"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
    <div id="4"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
</div><!--swappedContent-->

我發現後，我模擬這種佈局的例子（即使用JavaScript ），但我不確定鏈接到我不在這裏的網站的適當性。如果爲了清晰起見，我應該鏈接到它，請讓我知道。

來源

2011-09-01 Jake

我認爲你需要JavaScript。 CSS是爲了造型，而不是控制點擊事件。我想看看有人可以用css來做到這一點。 –

你可能是對的，很可能最終會使用一個簡單的腳本，但只是好奇，如果它是可能的。 – Jake

我認爲只用CSS就不可能。 HTML描述文本，CSS描述它的外觀，JavaScript處理用戶操作（點擊等）。 –

嘗試使用CSS「display」。在每一個DIV做：

<div id="myDiv" style="display:none;">

然後當你想要顯示的DIV，做在JavaScript如下：

document.getElementById("myDiv").style.display = "block";

所以在最後，你會碰到這樣的：

<div id="secondaryNav">  
    <a href="javascript:void(0)" onclick="showDiv('1')">Link to div1</a> 
    <a href="javascript:void(0)" onclick="showDiv('2')">Link to div2</a> 
    <a href="javascript:void(0)" onclick="showDiv('3')">Link to div3</a> 
    <a href="javascript:void(0)" onclick="showDiv('4')">Link to div4</a> 
</div> 

<div id="swappedContent"> 
    <div id="1"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
    <div id="2" style="display:none;"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
    <div id="3" style="display:none;"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
    <div id="4" style="display:none;"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
</div> 

<script type="text/javascript"> 
function showDiv(divId) { 
    for (i = 1; i <= 4; i++) { 
     document.getElementById(i).style.display = "none"; 
    } 

    document.getElementById(divId).style.display = "block"; 
} 
</script>

注意：一定要將腳本放在適當的位置（通常在元素中）。

來源

2011-09-01 23:03:32

看起來像一個足夠簡單的腳本，但我很好奇，如果它只能使用CSS來完成。 – Jake

看到我對你的問題的評論。我不認爲這是可能的。 CSS只是說事情的樣子。不是當他們看這樣或那樣。 JavaScript處理操作，包括在用戶點擊某些內容時重新排列頁面。 –

如果你想要一個愚蠢的比喻。 CSS就像髮帶一樣。他們讓你風格你的頭髮。但是，絲帶不能改變自己。你需要改變它們。裝飾與行動。 –

CSS DIV沒有固定高度的交換？

回答

相關問題