javascript - 在 html 选项卡中管理长文本 block

Question

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

我想要一种将长内容文本拆分为子选项卡或子页面的方法，但不允许用户离开主选项卡页面(即我仍然希望他们能够在4 个主要选项卡(摘要、内容、引用文献和作者)。

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

关于如何拆分内容部分以允许 4 个选项卡导航并无需滚动即可显示内容的任何想法？

我创建了一个代码笔，其中包含当前使用 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，因为您引用的是 section > p(因为在这种情况下，您在这些部分中没有任何直接的 p 子级，它们实际上是 section > .sectionContent > p。)