仅滚动标签HTML和CSS

时间：2017-03-20 19:54:32

标签： html css tabs

我想知道是否有创建滚动标签而不使用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>

3 个答案:

答案 0 :(得分：1)

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

基本思路是让标签本身为inline-block，并使其容器具有overflow-x: auto。当标签变得太大时，这将在容器上放置一个水平滚动条。

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

源自原始广告的可运行代码段位于下方。我将容器上的宽度专门设置为300px，以便您可以看到水平溢出的样子。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

更新：根据请求，这里可以将水平滚动条夹在标签和内容之间。请记住，这甚至比上面的解决方案 hackier ，真的滥用溢出和高度控制，但它是可行的。只是不要试图把任何东西放在内容div之下，因为这肯定不会很好。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

这可以通过将标签移动到单独的div并使用focus黑客突出显示标签来完成。这是一个有效的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>

答案 2 :(得分：0)

HTML和CSS无法滚动。只有JavaScript。如果您想在DIV中滚动：HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?

相关问题
最新问题