使用 html css 创建垂直 Tab
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18656995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create vertical Tab using html css
提问by Dibish
Hi,
你好，
I am designing a page with vertical tab. But I am not sure about how to achieve this design. I don't want to use any javascript, jquery etc. Planning to create separate views for each tab menu item. So i can change the active tab in each view. Please help to solve this issue. I don't have much code to post. Please provide some links to move in right direction.. Thanks in advance.
我正在设计一个带有垂直标签的页面。但我不确定如何实现这种设计。我不想使用任何 javascript、jquery 等。计划为每个选项卡菜单项创建单独的视图。所以我可以在每个视图中更改活动选项卡。请帮助解决这个问题。我没有太多代码要发布。请提供一些链接以朝着正确的方向前进.. 提前致谢。
This is what i did to acheive the design
这就是我为实现设计所做的
<style>
#content
{
background-color: #f2f2f2;
padding: 20px 10px;
overflow: auto;
}
#tab-container
{
float: left;
margin: 50px 0 0 0;
width: 126px;
}
#tab-container ul
{
list-style: none;
text-align: center;
}
#tab-container ul li
{
border-top: 1px solid #666;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
border-left: 8px solid #666;
background-color: #ddd;
margin: 8px 0;
}
#tab-container ul li a,
#tab-container ul li a:visited
{
text-decoration: none;
color: #666;
display: block;
padding: 15px 5px;
}
#tab-container ul li:hover
{
border-left: 8px solid #333;
}
#tab-container ul li a:hover
{
color: #000;
}
#tab-container ul li.selected
{
border-right: none;
background-color: #fff;
border-left: 8px solid #006699;
}
#main-container
{
min-height: 400px;
margin: 0 0 0 125px;
padding: 20px;
background-color: #fff;
border: 1px solid #888;
}
</style>
<div id="content">
<div id="tab-container">
<ul>
<li class="selected"><a href="">Introduction</a></li>
<li><a href="">Html</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JavaScript</a></li>
</ul>
</div>
<div id="main-container">
<h1>Put your content here...</h1>
</div>
</div>
采纳答案by karthipan raj
The below link will be simple and useful
下面的链接将简单而有用
The link will be as you expected with a little javascript
回答by Falguni Panchal
may i sure below demouseful for you;
我肯定below demo对你有用吗？
html
html
<div id="tabs">
<ul>
<li>
<a href="#a">Tab A</a>
</li>
<li>
<a href="#b">Tab B</a>
</li>
<li>
<a href="#c">Tab C</a>
</li>
<li>
<a href="#d">Tab D</a>
</li>
</ul>
<div id="a">
Content of A
</div>
<div id="b">
Content of B
</div>
<div id="c">
Content of C
</div>
<div id="d">
Content of D
</div>
</div>
css
css
.ui-tabs.ui-tabs-vertical {
padding: 0;
width: 42em;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
float: left;
width: 10em;
background: #CCC;
border-radius: 4px 0 0 4px;
border-right: 1px solid gray;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
margin: 0.2em 0;
border: 1px solid gray;
border-width: 1px 0 1px 1px;
border-radius: 4px 0 0 4px;
overflow: hidden;
position: relative;
right: -2px;
z-index: 2;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
width: 100%;
padding: 0.6em 1em;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
margin-bottom: 0.2em;
padding-bottom: 0;
border-right: 1px solid white;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
margin-bottom: 10px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
float: left;
width: 28em;
border-left: 1px solid gray;
border-radius: 0;
position: relative;
left: -1px;
}
js
js
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$('#tabs')
.tabs()
.addClass('ui-tabs-vertical ui-helper-clearfix');
</script>
