个人中心
gpt4 book ai didi

html - 如何使滚动条仅适用于选项卡，而不适用于内容？

转载 作者：行者123 更新时间：2023-11-28 03:03:51 24 4
gpt4 key购买 nike

如何让滚动条直接出现在选项卡下方，并且只应用于选项卡，而不是内容？

这是我在 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: 10px 0;
      overflow-y: auto;
      white-space: nowrap;
    }
    
    .tabs:after {
      clear: both;
      content: '';
      display: table;
    }
    
    .tabs .tab {
      display: inline;
    }
    
    .tabs .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>[type="radio"] {
      clip: rect(0 0 0 0);
      height: 1px;
      opacity: 0;
      position: fixed;
      width: 1px;
      z-index: -1;
    }
    
    .tabs .tab-panel {
      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;
      overflow-y: visible;
    }
    
    .tabs .tab [type="radio"]:checked+.tab-label {
      background: white;
      padding-bottom: 5px;
      z-index: 1;
    }
    
    .tabs .tab [type="radio"]:checked~.tab-panel {
      display: inline;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="tabs">
      <div class="tab">
        <input class="tab-radio" type="radio" id="tab-tab1" name="tabs-main" checked>
        <label class="tab-label" for="tab-tab1">Tab Caption 1</label>
        <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">
        <label class="tab-label" for="tab-tab2-0">Tab Caption 2</label>
        <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">
        <label class="tab-label" for="tab-tab2-1">Tab Caption 3</label>
        <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">
        <label class="tab-label" for="tab-tab2-2">Tab Caption 4</label>
        <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">
        <label class="tab-label" for="tab-tab2-3">Tab Caption 5</label>
        <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">
        <label class="tab-label" for="tab-tab2-4">Tab Caption 6</label>
        <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">
        <label class="tab-label" for="tab-tab2-5">Tab Caption 7</label>
        <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">
        <label class="tab-label" for="tab-tab2-6">Tab Caption 8</label>
        <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">
        <label class="tab-label" for="tab-tab2-7">Tab Caption 9</label>
        <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">
        <label class="tab-label" for="tab-tab2-8">Tab Caption 10</label>
        <div class="tab-panel">
          <div class="tab-content">
            <h2>Tab 10</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

我正在寻找一种非 JavaScript 解决方案。谢谢。

编辑

我研究了构建选项卡的不同方式，以便选项卡与选项卡面板分开。这是一个 example .不幸的是，这还不够，因为它使用 CSS 文件中选项卡的 ID。这是行不通的，因为有时会动态添加和删除选项卡，并且在不同页面上使用相同的 CSS 文件。

我决定在问题符合条件后立即悬赏。如果问题在此之前得到解决，我仍然会奖励最佳答案。

编辑

我将不再提供赏金，因为我自己解决了这个问题，除非有人可以解决没有 JavaScript 的选项卡不保持突出显示的问题。我什至认为这是不可能的。

最佳答案

我设法通过将标签移动到单独的 div 并使用 focus hack 来突出显示选项卡来使其工作。唯一的缺点是，我仍然需要使用 JavaScript 来保持所选选项卡突出显示并在页面加载时选择第一个选项卡。

这是一个有效的 JSFiddle .

我不能为我自己的答案提供赏金，但是，如果有人设法在没有 JavaScript 的情况下使其正常工作，我将很乐意提供赏金。

关于html - 如何使滚动条仅适用于选项卡，而不适用于内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46042077/

24 4 0
文章推荐： css - 基于 PX 的 REM 计算容器宽度不正确
文章推荐： javascript - 删除 html 自动对焦使用 javascript/jquery
文章推荐： javascript - 在 Tumblr 主题上使用 jQuery 删除特定的 HTML？
文章推荐： jquery - 移动设备上的背景图像模糊
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com