タブを状態によって制御

!++++

Ver.5　[ 機能を見る ] [ 機能設定を見る ]
Ver.6　[ 機能を見る ] [ 機能設定を見る ]

!----

1. はじめに

Client-side JavaScript を用いて、条件に応じたタブの表示／非表示を切り替える方法および、各項目の入力を制御する方法について紹介します。

2. サンプル機能の内容と確認ポイント

「タブ制御用（0：非表示／1：表示／9：編集不可）」単票ブロックでは、各ページ項目の値に基づき、タブの表示／非表示および、各項目の入力編集可否を制御します。

※ 本ブロックは「ID」による判定を行うため、検索条件として「ID」の入力が必要です。

ページ1～5の「ID」と値の対応：

Client-side JavaScript による実装内容は以下のとおりです。

1. 「タブ制御用（0：非表示／1：表示／9：編集不可）」ブロックにおいて、「表示項目名」ページ1～5の input 要素を取得します。

2. タブリスト内の li 要素をすべて取得します。

3. 手順1で取得した input 要素に対して some を使用し、各要素に対応するタブ要素を取得の上、いずれかが選択状態かつ表示状態であるかを判定します。

4. 手順1の input 要素に対して forEach を使用し、value が 0 の場合は非表示に、それ以外の場合は表示に切り替えます。

5. 上記の繰り返し処理中に選択中で表示中のタブが存在せず、まだ最初の表示タブをクリックしていない場合は、setTimeout により100ms待機し、input 要素が非表示（style.display: none でない）である場合にタブのリンク要素をクリックさせます。

   ※初期検索時に先頭タブが非表示の場合、2番目以降の表示タブをアクティブにするための処理です。

6. 最後に、firstVisibleTabClicked（最初に表示されたタブをクリックしたかどうかを示すフラグ）を true に設定します。

🔍 確認いただけるポイント

• 「TEST0001」と入力して検索した場合、ページ5のタブが非表示になっていること。

• 「TEST0002」と入力して検索した場合、ページ2のタブのみが表示され、かつアクティブになっていること。

• 「初期検索あり」時にいずれかのタブが選択状態（アクティブ）になっていること。

3. 画面イメージ

以下は、検索条件「TEST0001」において、「p.5」が非表示となっている状態を示しています。

以下は、検索条件「TEST0002」において、「p.2」のみが表示され、かつ「p.2」のタブがアクティブな状態を示しています。

以下は、「初期検索あり」の状態で、先頭の「p.1」が非表示の場合に、次に表示されている「p.2」のタブがアクティブになっている状態を示しています。

初期検索 URL

!++++

使用したコード一覧

!----