製表符，隱藏第一個選項卡上的上一個以及最後一個的下一個

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>