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

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

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

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

タブ

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

パラメータ

関数やプログラム実行時に与える設定値をパラメータと呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

受付中

特定のタブコンテンツを開きたい

mahomet
mahomet

総合スコア0

WordPress

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

タブ

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

パラメータ

関数やプログラム実行時に与える設定値をパラメータと呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

225閲覧

投稿2021/07/05 14:12

別ページから、特定のタブコンテンツを開きたいです。

ワードプレスで会社HPを作成しております。
その中で、複数タブ切り替えのあるページがあるのですが、
他ページから特定のタブに飛びたいです。

現状の仕様として、
・JQueryでクリックすると「active」がつき、クリックしたタブが開く

$('.tabcontent > div').hide(); $('.tabnav a').click(function () { $('.tabcontent > div').hide().filter(this.hash).fadeIn(); $('.tabnav a').removeClass('active'); $(this).addClass('active'); return false; }).filter(':eq(0)').click();

・リンク元にパラメータを追加して特定のタブコンテンツを開く
<参考サイト>
https://techmemo.biz/javascript/tab-direct-link/

上記サイト通り記述し、ページへの移動はできたのですが、タブコンテンツが消えてします。

・パラメータを変更

<a href="<?php echo esc_url(home_url()); ?>/TABPAGE?id=tab1"></a>

・下記サイトを参考にJQueryを追記

$(function() { //URL取得とチェック var url = location.href; url = (url.match(/\?id=tab\d+$/) || [])[0]; //取得したURLを「?」で分割 var params = url.split("?"); //params内のデータを「=」で分割 var tab = params[1].split("="); //tab内のデータをtabnameに格納 if($(tab).length){ var tabname = tab[1]; } else{ var tabname = "tab1"; } //コンテンツ非表示&amp;タブを非アクティブ $('.tabs .panel').hide(); $('.tabs a').removeClass('active'); //何番目のタブかを格納 var tabno = $('.tabs li#' + tabname).index(); //コンテンツ表示 $('.tabs .panel').eq(tabno).fadeIn(); //タブのアクティブ化 $('.tabs a').eq(tabno).addClass('active'); }); </script> コード

■下記が、現状HTMLです

<!-- タブボタン --> <ul class="tabnav l-container"> <li id="tab1"><a href="#tab01">TAB01</a></li> <li id="tab2"><a href="#tab02">TAB02</a></li> <li id="tab3"><a href="#tab03">TAB03</a></li> <li id="tab4"><a href="#tab04">TAB04</a></li> </ul> </div>
<div class="tabcontent">  <div id="tab01" class="tabcontent__inner panel">  <div id="tab02" class="tabcontent__inner panel"> 、、、、 </div>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

WordPress

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

タブ

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

パラメータ

関数やプログラム実行時に与える設定値をパラメータと呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。