タブの切替の実装について

Question

ご覧頂きありがとうございます。

タイトルのようにhtml,cssにてタブの切替を下記サイトを参考に作成しました。
そこで、サイト内の"基本の実装"においてタブをクリックしてタブ切り替えをする他に各パネル内に
ボタンを設置して、ボタンのクリックによる左右のタブの切替を実装を行いたいのですが、
やり方が分からず解決できないためここに質問させていただきます。

ご教授のほどよろしくおねがいします。

参考サイト：(https://boel.jp/tips/vol86_tabselect.html)

Comments

[y_waiwai]

その作成したものを提示しましょう。

Answer 1

どのようにタグの切り替えを実装しているのかわかりませんが、おそらく CSS で表示／非表示を切り替えていると推測して、jQuery を使っているのであれば、

ボタンに id をつけて

$("#button-A").click(function() {
    $("#tab-A").show();
    $("#tab-B").hide();
});
$("#button-B").click(function() {
    $("#tab-B").show();
    $("#tab-A").hide();
});

とか

$("#button-A").on("click", function() {
    $("#tab-A").css("display", "block");
    $("#tab-B").css("display", "none");
});
$("#button-B").on("click", function() {
    $("#tab-B").css("display", "block");
    $("#tab-A").css("display", "none");
});

とか、いろいろな方法があると思います。

Answer 2

タブ切り替えをする他に各パネル内にボタンを設置

それってタブの切替ではないのでは？
予め設定をしておいて表示したり消したりスルのが妥当かと

Comments

[hiro__12]

ご回答ありがとうございます。

予めの設定とはどのようなことをすれば良いのでしょうか？

[yambejp]

タブとその表示内容を例示してもらえれば考えます