是否可以使用jQuery easytabs插件右键对齐选项卡?

时间:2014-10-04 16:42:01

标签: javascript jquery html css

我一直在尝试完成此操作,虽然我可以使用绝对定位在选项卡容器的右侧显示一个选项卡,但当选项卡处于活动状态时,容器内容会跳过几个像素。 / 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()

0 个答案:

没有答案