Question

我正在使用bootstrap tabbable处理相册页面。在此页面中，每个选项卡都包含多行图像，第一行显示为默认值，而其他行则隐藏。按下“加载更多”按钮时，将显示另一行。请查看此Bootply以便于理解。

我的问题是，当显示所有内容时，我不知道如何隐藏我的“加载更多”按钮。这个问题对我来说有点复杂，因为我想在每个标签切换事件后重置我的标签。

我的代码：

HTML：

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active" id="tab"><a href="#tab1" data-toggle="tab">tab1</a></li>
        <li id="tab"><a href="#tab2" data-toggle="tab">tab2</a></li>
        <li id="tab"><a href="#tab3" data-toggle="tab">tab3</a></li>
    </ul>
</div>
<div class="con-box">
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <div>Row1-1</div>
            <div class="more" id="hidden1">Row1-2</div>
            <div class="more" id="hidden2">Row1-3</div>
        </div>
        <div class="tab-pane" id="tab2">
            <div>Row2-1</div>
            <div class="more" id="hidden1">Row2-2</div>
            <div class="more" id="hidden2">Row2-3</div>
        </div>

        <div class="tab-pane" id="tab3">
            <div>Row3-1</div>
            <div class="more" id="hidden1">Row3-2</div>
            <div class="more" id="hidden2">Row3-3</div>
        </div>
    </div>

    <div class="loading"><a>Load more...</a></div>
</div>

JavaScript的：

var hidden = 1;
$("div.more").hide();

$(".loading").click(function(){
    $("div#hidden"+hidden).show();
    hidden++;
});

$("li#tab").click(function(){
    $("div.more").hide();
    hidden=1;
});

Answer 1

我已经改变了一点方法。

每次单击load more按钮时，代码会在当前标签隐藏的div之间查找，并显示第一个。
如果隐藏div的长度（在当前标签页中）为<= 1，则必须隐藏.loading按钮
每次更改标签时，都必须显示.loading按钮

请注意，我已为每个id分配了一个唯一的div.more，但您可以将其删除，因为它未被使用

工作示例：http://www.bootply.com/P5LGMtSuIW

<强> HTML

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
        <li class="tab"><a href="#tab2" data-toggle="tab">tab2</a></li>
        <li class="tab"><a href="#tab3" data-toggle="tab">tab3</a></li>
    </ul>
</div>
<div class="con-box">
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <div>Row1-1</div>
            <div class="more" id="t1-1">Row1-2</div>
            <div class="more" id="t1-2">Row1-3</div>
        </div>
        <div class="tab-pane" id="tab2">
            <div>Row2-1</div>
            <div class="more" id="t2-1">Row2-2</div>
            <div class="more" id="t2-2">Row2-3</div>
        </div>
        <div class="tab-pane" id="tab3">
            <div>Row3-1</div>
            <div class="more" id="t3-1">Row3-2</div>
            <div class="more" id="t3-2">Row3-3</div>
        </div>
    </div>
    <div class="loading"><a>Load more...</a>
    </div>
</div>

<强> JS

$("div.more").hide();

$(".loading").click(function () {
    //--- get all divs
    var divs = $("div.tab-pane.active div.more:hidden");
    if (divs.length <= 1) $(".loading").hide();

    //--- show the first hidden
    $(divs).eq(0).show();
});

$("li.tab").click(function () {
    $(".loading").show();
    $("div.more").hide();
});

<强> CSS

div.more{
    display:none;
}

希望有所帮助

自动隐藏tabbable中的“加载更多”按钮

1 个答案: