0
スクロールバーをタブのすぐ下に表示させ、コンテンツではなくタブにのみ適用する方法はありますか？スクロールバーは、コンテンツではなくタブにのみ適用できますか？
ここに私のコードは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以外のソリューションを探しています。ありがとう。私はタブがタブパネルから分離されているように、タブを構造化するさまざまな方法を見てきました
EDIT
。ここにはexampleがあります。残念ながら、それはCSSファイルのタブのIDを使用するため、十分ではありません。タブが動的に追加されたり削除されることがあり、同じCSSファイルが別のページで使用されるため、これは機能しません。
私は質問が適格になるとすぐに賞金を提供することに決めました。それ以前に問題が解決された場合でも最高の回答に賞金を授与します。
EDIT
私は質問を自分で解決しているためしかし、誰かがJavaScriptをせずにハイライトされていない滞在のタブの問題を解決することができない限り、私はもはや、報奨金を提供していません。私はそれが可能であるとは思わない。
これは構造的な問題です。同じ親要素にないものはスクロールできません。最初にすべてのタブヘッダーを作成してからbody要素を作成する必要があります – wheeler
私のコードはほとんどの場合うまく動作するので、すべてを完全に再構成する必要はありません。唯一の問題は、タブが多すぎることです。 –