我一直在尝试完成此操作,虽然我可以使用绝对定位在选项卡容器的右侧显示一个选项卡,但当选项卡处于活动状态时,容器内容会跳过几个像素。 / p>
这是一个fiddle,这里有一些代码:
<div id="tab-container" class="tab-container">
<ul class='etabs'>
<li class='tab'><a href="#tabs1">Left</a></li>
<li class='tab' style="position:absolute; bottom:0; right:0;">
<a href="#tabs4">Right</a>
</li>
</ul>
<div class="panel-container">
<div id="tabs1">
<h2>This panels tab should be left-aligned...</h2>
</div>
<div id="tabs4">
<h2>This panels tab should be right-aligned...</h2>
</div>
</div>
</div>
.etabs {
margin: 0;
padding: 0;
position: relative;
}
.tab {
display: inline-block;
zoom:1;
*display:inline;
background: #eee;
border: solid 1px #999;
border-bottom: none;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
}
.tab a {
font-size: 14px;
line-height: 2em;
display: block;
padding: 0 10px;
outline: none;
text-decoration: none;
}
.tab.active {
background: #fff;
padding-top: 6px;
position: relative; top: 1px;
border-color: #666;
}
.tab a.active {
font-weight: bold;
}
.tab-container .panel-container {
background: #fff;
border: solid #666 1px;
padding: 10px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
}
插件初始化为$('#tab-container).easytabs()
。