响应式选项卡式布局可能吗？

Question

是否可以进行此布局，您将如何做？ 容器具有边框，只是不在选项卡所在的顶部。 在这里，只有选定的标签具有顶部边框。 选项卡的文本应居中，也可以左对齐。 但是，第一个选项卡的文本不得在图像之前开始（左侧应有相同的空格）。

当前html看起来像这样，但是可以根据需要更改：

<section class="grid-100 grid-parent tabs">
    <header>
        <ul>
            <li class="selected">Tab1</li>
            <li>Tab2</li>
            <li>Tab3</li>
        </ul>
    </header>
    <article class="tab visible">content</article>
    <article class="tab">content</article>
    <article class="tab">content</article>
    </article>
</section>

Answer 1

可以使用这种布局，但是如上所述，您需要发布CSS。

看一下Twitter Bootstrap ，它使您可以将选项卡式内容放置在响应框架中。

您需要添加一些JS来使其运行，您可以通过添加“ bootstrap.min.js”来完成此操作，也可以仅添加选项卡脚本。 这是指向标签JS文档的直接链接， 网址为http://getbootstrap.com/2.3.2/javascript.html#tabs

Answer 2

您的结构可用于任何选项卡式界面或手风琴。 请为您的标签页提供CSS。 您可以使用本文中提到的引导选项卡。 还有一些其他选项卡式解决方案，例如基础选项卡和jQuery ui选项卡。 如果您正在寻找高级响应式选项卡式解决方案，请查看zozo选项卡，其中有很多示例。

http://zozoui.c​​om/tabs

干杯

FariDesign