仅滚动标签 HTML 和 CSS

Question

我想知道是否有在不使用 JavaScript 的情况下创建滚动选项卡的方法。我被分配了一项严格使用 HTML 和 CSS 的任务，仅此而已。下面的代码是我能找到的创建选项卡的最佳解决方案，除了 HTML 和 CSS 之外不使用任何其他东西。我在网上找到了一些滚动标签的代码，但它还是使用了 JavaScript。那么，是否可以仅使用 HTML 和 CSS 来实现滚动标签？有什么帮助，谢谢！

 .tabs
{position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;}

.tab
{float: left;}

.tab label
{background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
cursor:pointer;
position: relative;
left: 1px; }

.tab [type=radio]
{display: none;}

.content {position: absolute;
top: 28px;
left: 0;
background: white;
height:100px;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;}

[type=radio]:checked ~ label
{background: white;
border-bottom: 1px solid white;
z-index: 2;}

[type=radio]:checked ~ label ~ .content
{z-index: 1;}

 <div class="tabs">
   <div class="tab">
      <input name="tab-group-1" id="tab-1" type="radio"/>
      <label for="tab-1">Tab One</label>
      <div class="content">
         Content 1
      </div>
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-2" type="radio"/>
      <label for="tab-2">Tab Two</label>
      <div class="content"> Content 2 </div>
   </div>
</div>

原文由 David Kris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

所以使用 JavaScript 可能会更好，但 CSS 中确实存在一个解决方案，如果您愿意允许对宽度和高度以及滚动条结束的位置进行某些限制。

基本思想是使选项卡本身成为 inline-block ，并让它们的容器具有 overflow-x: auto 。当标签太大时，这将在容器上放置一个水平滚动栏。

也就是说，这要求容器具有固定大小，如果您要将内容元素保留在每个选项卡中，则必须强制内容也具有固定大小’ div s .如果可以避免的话，我不想以这种方式构建它，但这是一个纯粹的 HTML 和 CSS 解决方案。

下面是一个可运行的片段，源自您的原始片段。我将容器上的宽度专门设置为 300px 这样您就可以看到水平溢出的样子。

 .tabs {
    position: relative;
    min-height: 200px;
    clear: both;
    margin: 0;
    padding-top: 15px;
    width: 300px;
    white-space: nowrap;
    overflow-x: auto;
}

.tab {
    display: inline-block;
    vertical-align: top;
}

.tab label {
    background: #eee;
    padding: 10px;
    border: 1px solid #ccc;
    margin-left: -1px;
    cursor:pointer;
    position: relative;
    left: 1px;
}

.tab [type=radio] {
    display: none;
}

.tab .content {
    position: fixed;
    white-space: normal;
    top: 50px;
    left: 0;
    background: white;
    height: 100px;
    right: 0;
    bottom: 0;
    padding: 20px;
    width: 266px;
    border: 1px solid #ccc;
}

.tab [type=radio]:checked ~ label {
    background: white;
    border-bottom: 1px solid white;
    z-index: 2;
}

.tab [type=radio]:checked ~ label ~ .content {
    z-index: 1;
}

 <div class="tabs">
   <div class="tab">
      <input name="tab-group-1" id="tab-1" type="radio"/>
      <label for="tab-1">Tab One</label>
      <div class="content">
         Content 1
      </div>
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-2" type="radio"/>
      <label for="tab-2">Tab Two</label>
      <div class="content"> Content 2 </div>
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-3" type="radio"/>
      <label for="tab-3">Tab Three</label>
      <div class="content"> Content 3 </div>
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-4" type="radio"/>
      <label for="tab-4">Tab Four</label>
      <div class="content"> Content 4 </div>
   </div>
</div>

更新： 根据请求，这里有一种方法可以将水平滚动条夹在选项卡和内容之间。请记住，这比上面的解决方案更 _骇人听闻_，确实滥用了溢出和高度控制，但它是可行的。只是不要尝试将任何内容放在内容 div 下方，因为那样肯定不会很好。

 .tabs {
    position: relative;
    clear: both;
    margin: 0;
    padding-top: 15px;
    width: 300px;
    height: 45px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.tab {
    display: inline-block;
    vertical-align: top;
}

.tab label {
    background: #eee;
    padding: 10px;
    border: 1px solid #ccc;
    margin-left: -1px;
    cursor:pointer;
    position: relative;
    left: 1px;
}

.tab [type=radio] {
    display: none;
}

.tab .content {
    position: fixed;
    white-space: normal;
    top: 70px;
    left: 0;
    background: white;
    height:100px;
    right: 0;
    bottom: 0;
    padding: 20px;
    width: 266px;
    border: 1px solid #ccc;
 }

.tab [type=radio]:checked ~ label {
    background: white;
    border-bottom: 1px solid white;
    z-index: 2;
}

.tab [type=radio]:checked ~ label ~ .content {
    z-index: 1;
}

 <div class="tabs">
   <div class="tab">
      <input name="tab-group-1" id="tab-1" type="radio"/>
      <label for="tab-1">Tab One</label>
      <div class="content">
         Content 1
      </div>
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-2" type="radio"/>
      <label for="tab-2">Tab Two</label>
      <div class="content"> Content 2 </div>
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-3" type="radio"/>
      <label for="tab-3">Tab Three</label>
      <div class="content"> Content 3 </div>
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-4" type="radio"/>
      <label for="tab-4">Tab Four</label>
      <div class="content"> Content 4 </div>
   </div>
</div>

原文由 Sean Werkema 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这可以通过将标签移动到单独的 div 并使用 focus hack 来突出显示选项卡来完成。这是一个有效的 JSFiddle 。

 <head>
    <title>Test Page</title>
    <style>
        .wrapper
        {
            width:800px;
            margin-left:auto;
            margin-right:auto;
        }

        .tab-radio
        {
            display:none;
        }

        .tabs
        {
            font-size: 0;
            margin: 0;
        }

        .labels
        {
            overflow-y: auto;
            white-space: nowrap;
        }

        .labels .tab-label
        {
            background: #eee;
            border: 1px solid #ccc;
            display: inline-block;
            font-size: 1rem;
            left: 1px;
            margin-left: -1px;
            padding: 5px;
            position: relative;
            vertical-align: bottom;
        }

        .tabs .tab-panel
        {
            position: fixed;
            display: inline-block;
            overflow: hidden;
            position: relative;
            height: 0;
            width: 0;
        }

        .tabs .tab-content
        {
            display: block;
            float: left;
            font-size: 1rem;
            width: 100%;
            white-space: normal;
        }

        span:focus
        {
            outline: none;
        }

        span:focus > .tab-label
        {
            background: white;
        }

        .tabs .tab [type="radio"]:checked ~ .tab-panel
        {
            display: inline;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="labels">
            <span tabindex="0">
                <label class="tab-label" for="tab-tab1">Tab Caption 1</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-0">Tab Caption 2</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-1">Tab Caption 3</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-2">Tab Caption 4</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-3">Tab Caption 5</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-4">Tab Caption 6</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-5">Tab Caption 7</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-6">Tab Caption 8</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-7">Tab Caption 9</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-8">Tab Caption 10</label>
            </span>
        </div>
        <div class="tabs">
            <div class="tab">
                <input class="tab-radio" type="radio" id="tab-tab1" name="tabs-main" checked>
                <div class="tab-panel">
                    <div class="tab-content">
                        <h2>Tab 1</h2>
                        <p>A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text.</p>
                    </div>
                </div>
            </div>
            <div class="tab">
                <input class="tab-radio" type="radio" id="tab-tab2-0" name="tabs-main">
                <div class="tab-panel">
                    <div class="tab-content">
                        <h2>Tab 2</h2>
                    </div>
                </div>
            </div>
            <div class="tab">
                <input class="tab-radio" type="radio" id="tab-tab2-1" name="tabs-main">
                <div class="tab-panel">
                    <div class="tab-content">
                        <h2>Tab 3</h2>
                    </div>
                </div>
            </div>
            <div class="tab">
                <input class="tab-radio" type="radio" id="tab-tab2-2" name="tabs-main">
                <div class="tab-panel">
                    <div class="tab-content">
                        <h2>Tab 4</h2>
                    </div>
                </div>
            </div>
            <div class="tab">
                <input class="tab-radio" type="radio" id="tab-tab2-3" name="tabs-main">
                <div class="tab-panel">
                    <div class="tab-content">
                        <h2>Tab 5</h2>
                    </div>
                </div>
            </div>
            <div class="tab">
                <input class="tab-radio" type="radio" id="tab-tab2-4" name="tabs-main">
                <div class="tab-panel">
                    <div class="tab-content">
                        <h2>Tab 6</h2>
                    </div>
                </div>
            </div>
            <div class="tab">
                <input class="tab-radio" type="radio" id="tab-tab2-5" name="tabs-main">
                <div class="tab-panel">
                    <div class="tab-content">
                        <h2>Tab 7</h2>
                    </div>
                </div>
            </div>
            <div class="tab">
                <input class="tab-radio" type="radio" id="tab-tab2-6" name="tabs-main">
                <div class="tab-panel">
                    <div class="tab-content">
                        <h2>Tab 8</h2>
                    </div>
                </div>
            </div>
            <div class="tab">
                <input class="tab-radio" type="radio" id="tab-tab2-7" name="tabs-main">
                <div class="tab-panel">
                    <div class="tab-content">
                        <h2>Tab 9</h2>
                    </div>
                </div>
            </div>
            <div class="tab">
                <input class="tab-radio" type="radio" id="tab-tab2-8" name="tabs-main">
                <div class="tab-panel">
                    <div class="tab-content">
                        <h2>Tab 10</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

原文由 Dan Bray 发布，翻译遵循 CC BY-SA 3.0 许可协议