タブ、非表示の最初のタブと前回の最後の表示

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）に移動して、開始時およびクリック後にチェックを実行しました。

また、私は小切手を終了した - あなたは最後のタブのユーザーがチェックを逃した。

更新

あなただけactivateとcreateのparamsとしてresetButtons関数を渡す、手動で関数を呼び出す必要はありません。この場合、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>

（ボタンの上だけではなく）あまりにタブをクリックした場合