これだけのためにjQuery使ってた気がするけど、今ではＣＳＳだけでも作れるっぽい。
というかCSSの書き方としては昔からある。
各タブは、チェックボックスとこれに連携するラベルで構成する。
<input id="{タブ名}_tab" type="radio" name="tab_item" checked>
<label class="tab_item" for="{タブ名}_tab">{タブ・タイトル}</label>チェックボックス 自体は表示する必要は無い。
input[name="tab_item"] {
display: none;
}タブことラベルをクリックすると チェックボックス の状態がcheckedに切り替わるので、チェックボックスに対応する兄弟のブロックを表示。
ここは、タブ名が変わったり増えたりするる度に修正しないといけない。
#{タブ名1}_tab:checked~#{タブ名1}_content,
#{タブ名2}_tab:checked~#{タブ名2}_content,
#{タブ名3}_tab:checked~#{タブ名3}_content {
/* 表示 */
display: block;
/* または上下左右センタリング */
display: flex;
justify-content: center;
align-items: center;
}cssに正規表現はあるけど、ペアだけ対象にする書き方は無い。
[id$="_tab"]:checked ~ [id$="_ content] {
どのタブをクリックしても、全部表示しようとする
}なので 兄弟のブロック は初期非表示。
.tab_content {
display: none;
...
}