リロード後もタブを維持する方法

Question

一つのファイル(index.php)に、
2つのタブ(A,B)でコンテンツを分けています。
CSSのinputのradioでタブ機能を実現しています。

課題は、タブBでformメソッドのsubmitボタンを押したときに、
リロード後、タブAが表示されることです。

実現したいことは、
リロード後もタブBで表示されることです。

質問したいことは、
どういった方法で実現するのが良いのか？
アドバイスいただけると幸いです。

よくあるケースだとは思いますが、
調べても、なかなか参考が見当たらず、
こちらに質問いたしました。

どうぞよろしくお願い致します。

<div class="tab-wrap">

<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked>
<label class="tab-label" for="TAB-01">タブA</label>
<div class="tab-content">
<form method="post">
<input type='submit' name='' value=''>
</form>
</div>
<input id="TAB-02" type="radio" name="TAB" class="tab-switch">
<label class="tab-label" for="TAB-02">タブB</label>
<div class="tab-content">
<form method="post">
<input type='submit' name='' value=''>
</form>
</div>

</div>

.tab-switch {
display: none;
}
.tab-wrap {
display: flex;
flex-wrap: wrap;
}
.tab-label {
order: -1;
position: relative;
z-index: 1;
}
.tab-content {
width: 100%;
height: 0;
overflow: hidden;
opacity: 0;
}
.tab-switch:checked+.tab-label+.tab-content {
height: auto;
overflow: auto;
opacity: 1;
}

Comments

[hentaiman]

htmlのみで？タブ？

[think49]

@hentaiman さん
「CSSのinputのradioでタブ機能を実現しています」とあるので、:checked擬似クラスを利用しているのでしょう。
https://jsfiddle.net/m9y4nbLj/

実装に影響するのでCSSも明記すべきだと思いますが…。
https://ja.stackoverflow.com/help/minimal-reproducible-example

<label class="tab-label" for="TAB-04"> は誤記としか思えません。
input要素を非表示にすると実装不可能になります。

[退会済みユーザー]

＞<label class="tab-label" for="TAB-04">
誤記でした。ご指摘いただきありがとうございます。

CSSは、今回は大まかな方法をお尋ねしたかったので、省略いたしました。
申し訳ございません。失礼いたしました。

[hentaiman]

> 実装に影響するのでCSSも明記すべきだと思いますが…。

stackoverflowの質問に記載するコードの例良いですね

> 省略いたしました。

コピペで再現出来ないコードだと何をやりたいか分からないし、丸投げかとも思ったので作りかけのコードがあるなら隠さず載せるべきですね。

> 今回は大まかな方法をお

もし自分が「リンクにURLパラメーターなど判別する要素を渡してそれを基に表示を切り替える処理を書きましょう」って書いたとして理解出来るなら良いと思いますけど、

[think49]

> 今回は大まかな方法をお尋ねしたかったので、

方法を知りたいだけなら、その後の実装時の問題があったとしても質問範囲外となるはずなので、別に質問を立てるべきだとは思います。
後追いで質問が拡張されると回答側もだんだんと内容がぶれてきますし、始めの質問に回答した人を放置して後続質問への回答に注力しがちなので、避けたいところですね。

「やり方を教えてください」という体裁ながらも、ふたを開けてみれば実装面にも追求している質問は非常に多いので、回答側としては言葉通りに受け取る事は難しいです。
方法のみでよくて、コードが不要な事は質問文に明記しておくと良いと思います。

Answer 1

input[type=radio] にチェックすればタブが開く実装と受け取りました。
タブを開く実装部分は本題ではなさそうなので割愛します。

今回は大まかな方法をお尋ねしたかったので、

「どのタブを開いているか」を保存する場所が問題で、私の知っている範囲では4つあります。

• GETパラメータ
• localStorage (※satokeiさんの回答通り)
• IndexedDB
• Cookie

各APIを調べれば、値の「参照方法」「保存方法」共に見つかると思います。
個人的にはGETパラメータをお勧めします。

• ブラウザの保存領域を消費しない
• サーバサイドスクリプト(PHP)でも参照できる
• 履歴に残る(ブックマーク可能)
• History APIと組み合わせれば、非同期動作が可能
• URLSearchParamsでGETパラメータ参照可能

Re: satokei さん

Comments

[退会済みユーザー]

ありがとうございます。
現在、「localStorage」で実装を試みています。
明日以降、「GETパラメータ」を試みます。
なにか疑問点があれば追記するかもしれませんが、
もしタイミングが合えばまた教えていただけると幸いです。
まずはご丁寧に分かりやすく教えていただき、
ありがとうございました。

[退会済みユーザー]

おかげさまで「GETパラメータ」で実現することができました。
コードはいちお後ほど追記いたします。

私の知識レベルに合っていて助かりました。

実現したかったことは単純なことでしたので、
教えていただいた、「History APIと組み合わせれば...」など
後半部分はまだ良く分かりませんが、
面倒を見てくださり大変、ありがとうございました！

Answer 2

こちらのページが参考になるかと思います。

WEBページの再読み込みを行っても、チェックボックスの選択状態を保持するJavaScript

以下引用

ページの再読み込みでも、チェックボックスの状態を保持する方法

function getStorage(key_prefix) {
  // this function will return us an object with a "set" and "get" method
  // using either localStorage if available, or defaulting to document.cookie
  if (window.localStorage) {
    // use localStorage:
    return {
      set: function (id, data) {
        localStorage.setItem(key_prefix + id, data);
      },
      get: function (id) {
        return localStorage.getItem(key_prefix + id);
      }
    };
  } else {
    // use document.cookie:
    return {
      set: function (id, data) {
        document.cookie = key_prefix + id + '=' + encodeURIComponent(data);
      },
      get: function (id, data) {
        var cookies = document.cookie,
          parsed = {};
        cookies.replace(/([^=]+)=([^;]*);?\s*/g, function (whole, key, value) {
          parsed[key] = decodeURIComponent(value);
        });
        return parsed[key_prefix + id];
      }
    };
  }
}
jQuery(function ($) {
  // a key prefix is used for the cookie/storage
  var storedData = getStorage('com_mysite_checkboxes_');
  $('div.check input:checkbox').bind('change', function () {
    $('#' + this.id + 'txt').toggle($(this).is(':checked'));
    // save the data on change
    storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
  }).each(function () {
    // on load, set the value to what we read from storage:
    var val = storedData.get(this.id);
    if (val == 'checked') $(this).attr('checked', 'checked');
    if (val == 'not') $(this).removeAttr('checked');
    if (val) $(this).trigger('change');
  });
});

Comments

[退会済みユーザー]

教えて頂きありがとうございます。
明日、詳細に確認いたします。
御礼までに。

[退会済みユーザー]

localStorageを利用した方法で、半分、実装できました。
半分というのは、予期せぬ動作が生じてしまい、
それを修正するには、まだ知識が足りなく断念しました。

結果では、「GETパラメータ」で実現することができました。
私の今のレベルにはちょうど良いこともあります。

localStorageは勉強になりました。
ありがとうございました。

Answer 3

「URLハッシュ」で実現できました。

大まかな方法は、リロード時に、
URLにアンカーを追加して
Javascriptで分岐させることで実現できました。

var urlHash = location.hash;

if(urlHash){

if (urlHash == '#TAB-02') {
var element = document.getElementById( 'TAB-02' );
element.checked = true ;
} else {
var element = document.getElementById( 'TAB-01' );
element.checked = true ;
}

}else {
var element = document.getElementById( 'TAB-01' );
element.checked = true ;
}

Comments

[think49]

> var urlHash = location.hash;

「URLハッシュ」と「GETパラメータ」は別物です。
GETメソッドでform送信した際に、URLクエリ文字列に埋め込まれた ?name=value がGETパラメータとなります。

https://www.google.com/search?q=get+parameter
console.log(new URLSearchParams(location.search).get('q')); // "get parameter"

URLハッシュはフラグメント識別子としての役割と衝突する為、GETパラメータを推奨しています。
URLハッシュを使うのなら、:target 擬似クラスで実装するのがエレガントです(CSSのみ、JS不要)。
https://developer.mozilla.org/ja/docs/Web/CSS/:target

> } else {
> ...
> }else {

else が2度出現しています。