[九州機電株式会社]

【お使いの Snow Monkey のバージョン】15.14.5
【お使いの Snow Monkey Blocks のバージョン】13.2.1
【お使いの Snow Monkey Editor のバージョン】6.2.1
【お使いのブラウザ】google chrome
【当該サイトのURL】https://www.kyushu-kiden.co.jp/works/works-category

### 実現したいこと

いつもお世話になっております。
タブ設定についてご質問があります。

ページ1に、
タブブロックを利用してタブ「A」「B」「C」を設定してページを作った場合、

・ページ2からの内部リンクで開いたとき → タブ「A」を開いた状態でページ表示
・ページ3からの内部リンクで開いたとき → タブ「C」を開いた状態でページ表示

させる方法はありますでしょうか？

♥ 3

いいねをした人:

[キタジマ タカシ]

そのような機能は無いので、やるとすれば JavaScript を書いて実行させる感じになります。

下記サンプルです。

window.addEventListener(
  'load', // ページを完全に読み込んだ後に実行
  () => {
    // 前のページの URL を取得
    const ref = document.referrer.toLowerCase();

    // 対象にしたいページのスラッグを指定
    const targetSlug = encodeURI( '/ブログ/' ).toLowerCase();

    if ( -1 !== ref.indexOf( targetSlug ) ) {
      // 対象とするタブブロックを指定
      const tabs = document.querySelector( '[data-tabs-id="0cd7c37d-33db-4b10-b91d-30a091d2f667"]' );
      if ( !! tabs ) {
        // 対象とするタブを指定
        const tab = tabs.querySelector( '[aria-controls="block-ce097728-902c-47fa-9c7b-d25e712c782f"]' );
        if ( !! tab ) {
          // 対象のタブを強制クリックする
          tab.click();
        }
      }
    }
  },
  true
);

♥ 2

いいねをした人:

[九州機電株式会社]

お忙しいところサンプルをご提供ありがとうございました。
こちらでやってみます。

♥ 0

いいねをした人: 居ません

[九州機電株式会社]

すいません実装したいことが間違えていました・・・。
こちらの場合どのようになりますでしょうか？

ページ1に、
タブブロックを利用してタブ「A」「B」「C」を設定してページを作った場合、

ページ2の、
・リンクバナー画像１からの内部リンクで開いたとき → タブ「A」を開いた状態でページ表示
・リンクバナー画像２からの内部リンクで開いたとき → タブ「C」を開いた状態でページ表示

させる方法はありますでしょうか？
リンクバナー画像に設定するURLにパラメータを付けておいて、
それで判別するような感じでしょうか？

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

あーなるほどです。そうですね、

リンクバナー画像に設定するURLにパラメータを付けておいて、
それで判別するような感じでしょうか？

が一番やりやすい方法かなと思います。window.location.search で取得できるので、それを使って先のコードを少し書き換えればいけるかなと思います。

♥ 1

いいねをした人:

[九州機電株式会社]

コード書き換えで無事実装できました。
ありがとうございました。

♥ 1

いいねをした人:

[投稿者]

投稿