我正在尝试在左侧创建一个带有选项卡的基本门户,而不是在顶部.理想情况下,我想在没有任何JavaScript的情况下完成此任务; 仅限HTML5和CSS3.
我一直在玩水平标签的以下代码:http://jsfiddle.net/Juggler/9Ue9j/2/
<div id="page-wrap">
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
<p>Stuff for Tab One</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
<p>Stuff for Tab Two</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
<p>Stuff for Tab Three</p>
</div>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
和
* {
margin: 0;
padding: 0;
}
body {
background: #999;
}
#page-wrap {
width: …Run Code Online (Sandbox Code Playgroud)