1

所以基本上，我有一个标签栏，你有一个添加按钮来克隆标签，然后编辑它们。我的问题是，一旦添加了这么多标签，我的（左右箭头）和我的添加按钮就会被删除。如何添加标签，但不让我的按钮消失？固定位置不是一个选项，我想要最新选项卡旁边的按钮，一旦栏达到最大宽度，按钮就会留在那里。箭头用于滚动选项卡以查看将在溢出时隐藏的选项卡。http://jsfiddle.net/pHraC/1/

html

<div class="tabBox" style='max-width:800px'>
  <ul class="tabs">
    <li class="selected"><a href="#">Certificate of Quantity</a></li>
    <li><a href="#">COQ - Products/Chemicals</a></li>
    <li><a href="#">Movement Summary</a></li>
    <li><a href="#">Barge Survey</a></li>

    <ul class="tabButtons">
      <li><a href="#" class="tabNavLeft"><-</a></li>
      <li><a href="step-2b.html" class="tabNavRight">-></a></li>
      <li><div class="tabNavAdd" title="Add another report form to nomination" style="margin-top:6px">
      <input type='button' value='add' class='addTab' /></div></li>
    </ul>            
    </ul>  
</div>

jQuery

// add new tab
$("input.addTab").live("click", function (event) {
  var ultab = $(this).closest('.tabs'); // cache ul.tabs
  var li = ultab.children('li:not(.selected)').first(); // cache the row  
  ultab.children('li:last').after(li.clone().find('a').attr("href", "#").text('New Tab').end());
});
4

2 回答 2

1

首先，我建议您将.tabButtons表格分开.tabs

<div class="tabBox" style='max-width:800px'>
    <ul class="tabs">
        <li class="selected"><a href="#">Certificate of Quantity</a>
        </li>
        <li><a href="#">COQ - Products/Chemicals</a>
        </li>
        <li><a href="#">Movement Summary</a>
        </li>
        <li><a href="#">Barge Survey</a>
        </li>
    </ul>
    <ul class="tabButtons">
        <li><a href="#" class="tabNavLeft"> <- </a>
            </li>
        <li><a href="step-2b.html" class="tabNavRight">-></a>
        </li>
        <li>
            <div class="tabNavAdd" title="Add another report form to nomination" style="margin-top:6px">
                <input type='button' value='add' class='addTab' />
            </div>
        </li>
    </ul>

然后，用于position:absolute将它们放在您喜欢的位置：

.tabBox { position:relative;

显示：内联块；-webkit-box-sizing：边框框；-moz-box-sizing：边框框；box-sizing：边框框；填充：0 50px 0 0;} .tabButtons { 位置：绝对；顶部：0px；右：10px；z-索引：2；}

您还必须定义静态以外的位置才能.tabBox使其工作并为添加按钮添加一些填充。

最后，.tabs li像这样设置样式：

.tabBox .tabs li {
    display: inline-block;
    list-style: none;
    margin: 9px 0 0 0;
    padding: 3px 1px 0;
    height: 36px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

white-space:nowrap;并将和添加display:inline-block;到.tabBox .tabs

结果如下：http: //jsfiddle.net/pavloschris/pHraC/4/

于 2013-02-26T17:20:57.987 回答
0

最简单的方法是用填充偏移顶层<ul>并将按钮放置为绝对位置。

这是一个快速演示。

http://jsfiddle.net/ionko22/vURkK/

哦，也许最好把你的孩子<ul>放在一个<li>.

于 2013-02-26T17:35:10.143 回答