jquery - タブセレクターを隠すjQuery

Question

jQueryタブコントロールのタブセレクターを非表示にする方法を知っている人はいますか?

複数のビューを非表示にすることで、ウィザード セットアップ タイプのことを実行しようとしていますが、必要なときにのみ表示されます。

何か案は？タブ以外に使用できるものはありますか?

Answer 1

$(function() {
  $(".nextButton").click(function() {
    $(this).parent().hide().next().show();
  });
  $(".prevButton").click(function() {
    $(this).parent().hide().prev().show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">
</script>


<div>
  Tab One<br/>
  <input type="button" class="nextButton" value="next" />
</div>
<div style="display:none;">
  Tab Two<br/>
  <input type="button" class="prevButton" value="prev" />
  <input type="button" class="nextButton" value="next" />
</div>
<div style="display:none;">
  Tab Three<br/>
  <input type="button" class="prevButton" value="prev" />
</div>

Answer 2

互いの上に div を作成し、show() と hide() を使用してそれらを表示/非表示にするだけです。プログラムでビューを切り替えるだけの場合は、タブは必要ありません。それはそれと同じくらい簡単です

HTML:

<div class="view" id="view1">
</div>
<div class="view" id="view2">
</div>
<div class="view" id="view2">
</div>

Javascript:

function selectView(i) {
    $(".view").hide();
    $("#view" + 1).show();
}

または、ID を使用したくない場合:

function selectView(i) {
    $(".view").hide();
    $(".view :eq(" + 1 + ")").show();
}