制表符，隐藏第一个选项卡上的上一个以及最后一个的下一个

Question

我无法获取下一个和上一个按钮的隐藏和显示，当它位于第一页或最后一页时。我研究过不同的方法，但还没有得到任何与最新的图书馆工作。

是否可以用来做第一和最后一个方法？

提示将很乐意被接受！

$(document).ready(function() { 
 
    $("#tabs").tabs(); 
 

 
    $(".btnNext").click(function() { 
 
    var active = $("#tabs").tabs("option", "active"); 
 
    $("#tabs").tabs("option", "active", active + 1); 
 
    }); 
 

 

 
    $(".btnPrev").click(function() { 
 
    var active = $("#tabs").tabs("option", "active"); 
 
    $("#tabs").tabs("option", "active", active - 1); 
 
    }); 
 

 
    var active = $("#tabs").tabs("option", "active"); 
 
    if (active == 0) { 
 
    $(".btnPrev").hide(); 
 
    } else { 
 
    $(".btnPrev").show(); 
 
    }; 
 

 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> 
 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#fragment-1" class="firstTab"><span>One</span></a> 
 
    </li> 
 
    <li><a href="#fragment-2"><span>Two</span></a> 
 
    </li> 
 
    <li><a href="#fragment-3" class="lastTab"><span>Three</span></a> 
 
    </li> 
 
    </ul> 
 
    <div id="fragment-1"> 
 
    <p>First tab is active by default:</p> 
 
    <pre><code>$("#tabs").tabs(); </code></pre> 
 
    </div> 
 
    <div id="fragment-2"> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
 
    dolore magna aliquam erat volutpat. 
 
    </div> 
 
    <div id="fragment-3"> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
 
    dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 
    </div> 
 
</div> 
 
<button class="btnPrev">Prev</button> 
 
<button class="btnNext">Next</button>

Answer 1

您需要检查每个active更换标签。

所以，我搬到了检查，以单独的函数（resetButtons），并在开始运行，并在每次点击后。

另外。我完成了检查 - 您错过了检查是否在最后一个选项卡中的用户。

更新

你并不需要手动调用的函数，只要传递resetButtons功能activate和create PARAMS。在这种情况下，resetButtons将运行，如果用户点击标签太（不仅上的按钮）

$(document).ready(function() { 
 
    $("#tabs").tabs({ 
 
    activate: resetButtons, 
 
    create: resetButtons 
 
    }); 
 
    // resetButtons(); 
 
    
 
    $(".btnNext").click(function() { 
 
    var active = $("#tabs").tabs("option", "active"); 
 
    $("#tabs").tabs("option", "active", active + 1); 
 
    // resetButtons(); 
 
    }); 
 

 

 
    $(".btnPrev").click(function() { 
 
    var active = $("#tabs").tabs("option", "active"); 
 
    $("#tabs").tabs("option", "active", active - 1); 
 
    // resetButtons(); 
 
    }); 
 

 
}); 
 

 
function resetButtons() { 
 
    var active = $("#tabs").tabs("option", "active"); 
 
    var tabsLength = $("#tabs li").length; 
 
    if (active == 0) { 
 
    $(".btnPrev").hide(); 
 
    } else { 
 
    $(".btnPrev").show(); 
 
    }; 
 
    
 
    if (active == (tabsLength - 1)) { 
 
    $(".btnNext").hide(); 
 
    } else { 
 
    $(".btnNext").show(); 
 
    }; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> 
 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#fragment-1" class="firstTab"><span>One</span></a> 
 
    </li> 
 
    <li><a href="#fragment-2"><span>Two</span></a> 
 
    </li> 
 
    <li><a href="#fragment-3" class="lastTab"><span>Three</span></a> 
 
    </li> 
 
    </ul> 
 
    <div id="fragment-1"> 
 
    <p>First tab is active by default:</p> 
 
    <pre><code>$("#tabs").tabs(); </code></pre> 
 
    </div> 
 
    <div id="fragment-2"> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
 
    dolore magna aliquam erat volutpat. 
 
    </div> 
 
    <div id="fragment-3"> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
 
    dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 
    </div> 
 
</div> 
 
<button class="btnPrev">Prev</button> 
 
<button class="btnNext">Next</button>