Javascript 在html选项卡中管理长文本块

我有大量包含不同长度的长文本（1000字以上）的页面，我仅使用CSS将其分为逻辑选项卡（摘要、内容、引用和作者）。“内容”选项卡的文本比其他选项卡多得多，用户仍然会疯狂地滚动浏览所有内容

我希望能够将长内容文本拆分为子选项卡或子页面，但不允许用户离开主选项卡页面（即，我仍然希望他们能够在4个主选项卡（摘要、内容、参考和作者）之间切换）

我也不想查看所有内容并手动输入内容部分的断点，因为内容可能会经常更改

关于如何将内容部分拆分为4个选项卡导航并显示内容而无需滚动，您有何想法

我创建了一个codepen，其中包含一个html和CSS代码当前的示例：

总结


样品

这里有长文本

此内容显示在选项卡3上

此内容显示在选项卡4上

欢迎来到SO

您可以尝试使用

overflow

css属性，该属性处理内容在溢出包含元素的边框时的行为，并为内容添加一个高度（因此将具有上述内容边框限制），如下所示：

将内容包装到包含元素中，例如

：

---

注释：我还将

color

属性添加到此类的CSS中，因为您引用的是section>p（在本例中，您在这些节中没有任何直接的

p

子级，它们实际上是

section>。sectionContent>p
完美，正是我想要的。：）谢谢Gabor
    <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>

....
<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>
....

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