タブの選択でクエリをつける

Question

タブの選択でクエリをつける

タブの選択で、ページ遷移をせずにクエリをつけたいです。
特にコードなどまだ作成していませんが、
0. ページ遷移はなし。
0. タブの画面が切り替わるのをトリガーに
そのタブの表示ごとにURLにクエリをつける

この２点の動作をしたいです。

試したこと

タブを作りました。

<ul class="tab-group">
    <li class="tab is-active">Tab-A</li>
    <li class="tab"><a href="/works/?shop">Tab-B</a></li>
    <li class="tab">Tab-C</li>
</ul>

	.tab-group{
    display: flex;
    justify-content: center;
}
.tab{
    flex-grow: 1;
    padding:5px;
    list-style:none;
    border:solid 1px #CCC;
    text-align:center;
    cursor:pointer;
}
.panel-group{
    height:100px;
    border:solid 1px #CCC;
    border-top:none;
    background:#eee;
}
.panel{
    display:none;
}
.tab.is-active{
    background:#F00;
    color:#FFF;
    transition: all 0.2s ease-out;
}
.panel.is-show{
    display:block;
}

jQuery(function($){
    $('.tab').click(function(){
        $('.is-active').removeClass('is-active');
        $(this).addClass('is-active');
        $('.is-show').removeClass('is-show');
        const index = $(this).index();
        $('.panel').addClass('is-show');
    });
});

そのタブにアンカーで
<a href="/?id=hogehoge"></a>
とつければ、ページ遷移でクエリが着くのはわかるのですが、
これをページ遷移なしで、クエリだけ変更する方法がわかりません。

このクエリが変更できるのならば、そのクエリで、ループ変更しようと考えております。

まずはタブのところを
ご享受いただけれたらと思います。

よろしくお願いいたします。

Comments

[退会済みユーザー]

「ページ遷移はなし」というのは、別URLに飛ぶのは駄目だが、同じURL（クエリが付加されたURL）で再表示するのは良しということですか？　また、「タグの画面」とは具体的にどこのページのことをさし、「切り替わる」というのはどういう動作を意図していますか？　以上のことを質問文に追記してください。

[arraky]

申し訳ありませんでした。
タブの話です。急いで書いていたため、間違えてしまいました。
修正依頼ありがとうございました。

Answer 1

タブの選択で、ページ遷移をせずにクエリをつけたいです。

このクエリが変更できるのならば、そのクエリで、ループ変更しようと考えております。

クエリをつけるだけの画面遷移なしではサーバー側からデータを受信しないので、WordPress から新しいデータを取得するのは無理ですね。

遷移無しで画面を書き換えるのであれば、JavaScript で WordPress のサーバーとデータの送受信をして、HTML を書き換える方法で実現する必要があると思います。

参考:
プラグインで AJAX を使う

Comments

[arraky]

勉強になります！ありがとうございました！！

Answer 2

このクエリが変更できるのならば、そのクエリで、ループ変更しようと考えております。

「ループ」をPHP側だと仮定するなら、できません。ページ移動する仕様にしましょう。
PHPはサーバ側で動きます。PHPが出力したHTMLがブラウザに渡り、ブラウザ上でJavaScriptが実行されます。JavaScript実行時点でHTML上に無い物は再度サーバに取得に行く必要があります。