質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

Q&A

解決済

2回答

2065閲覧

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

arraky

総合スコア17

URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

0グッド

0クリップ

投稿2020/02/05 02:33

編集2020/02/07 09:22

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

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

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

試したこと

タブを作りました。

HTML

1 2<ul class="tab-group"> 3 <li class="tab is-active">Tab-A</li> 4 <li class="tab"><a href="/works/?shop">Tab-B</a></li> 5 <li class="tab">Tab-C</li> 6</ul>

css

1 .tab-group{ 2 display: flex; 3 justify-content: center; 4} 5.tab{ 6 flex-grow: 1; 7 padding:5px; 8 list-style:none; 9 border:solid 1px #CCC; 10 text-align:center; 11 cursor:pointer; 12} 13.panel-group{ 14 height:100px; 15 border:solid 1px #CCC; 16 border-top:none; 17 background:#eee; 18} 19.panel{ 20 display:none; 21} 22.tab.is-active{ 23 background:#F00; 24 color:#FFF; 25 transition: all 0.2s ease-out; 26} 27.panel.is-show{ 28 display:block; 29}

js

1jQuery(function($){ 2 $('.tab').click(function(){ 3 $('.is-active').removeClass('is-active'); 4 $(this).addClass('is-active'); 5 $('.is-show').removeClass('is-show'); 6 const index = $(this).index(); 7 $('.panel').addClass('is-show'); 8 }); 9});

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/02/05 07:05

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

2020/02/07 07:55

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

回答2

0

ベストアンサー

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

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

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

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

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

投稿2020/02/08 07:29

CHERRY

総合スコア25171

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

arraky

2020/04/09 10:00 編集

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

0

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

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

投稿2020/02/08 04:58

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問