在html選項卡中管理長文本塊

Question

我有大量的頁面，其中包含使用CSS分隔爲邏輯選項卡（摘要，內容，參考和作者）的長文本（1000個詞+）的不同長度。 「內容」選項卡的文本比其他選項卡多得多，並且用戶仍然會瘋狂滾動以便全部閱讀。

我想要一種將長內容文本拆分爲子標籤或子頁面的方式，但不允許用戶離開主標籤頁（即，我仍然希望它們能夠在這4個主要選項卡（摘要，內容，參考和作者）

我也不希望瀏覽所有內容並手動輸入內容部分的斷點，因爲內容可能會相當頻繁地更改。

有關如何將內容部分拆分爲允許4選項卡導航並顯示內容而不必滾動的任何想法？

我創建了一個codepen與它目前看起來像HTML和CSS代碼示例：http://codepen.io/TimSparrow/pen/xdKAa

<div class="chapters"> 
<article class="tabs"> 

    <section id="tab1"> 
     <h2><a href="#tab1">Summary</a></h2> 
    <p><h3>Summary</h3></p> 
        <ul> 
         <li>sample</li> 
        </ul> 
    </section> 

    <section id="tab2"> 
     <h2><a href="#tab2">Content</a></h2> 
     <p>Long Text Goes Here</p> 
    </section> 

    <section id="tab3"> 
     <h2><a href="#tab3">References</a></h2> 
     <p>This content appears on tab 3.</p> 
    </section> 

    <section id="tab4"> 
     <h2><a href="#tab4">Authors</a></h2> 
     <p>This content appears on tab 4.</p> 
    </section> 

</article> 
</div> 

Answer 1

歡迎SO，

你可以嘗試使用它處理如何overflow CSS屬性如果內容應該溢出包含元素的邊界併爲內容添加高度（因此它將具有上述內容邊界限制），則內容應該表現如下：

將您的內容包裝到包含元素中，用於示例<div class="sectionContent">：

.... 
<section id="tab1"> 
    <h2><a href="#tab1">Summary</a></h2> 
    <div class="sectionContent"> 
     <h3>Summary</h3> 
     <p>Long text here</p> 
     .... 
     .... 
    </div> // div.sectionContent closed 
</section> 
.... 

，然後添加一些CSS來碗，使其工作：

.sectionContent{ 
    overflow-y : scroll; 
    height : 15em; 
    color:#000; 
} 

評論：我還添加了color屬性這一類的CSS，因爲你參考（在這種情況下，你沒有任何直接p部分內的孩子，他們實際上是section > .sectionContent > p。）