結果を示す：
コード：
まず、タブ項目の属性名とインデックスをカスタマイズします。
タブ バー内の項目をクリックするときは、まずタブ バー内のアクティブなスタイルをすべてクリアします。
次に、インデックスを使用して、クリックしたタブ バーにアクティブなスタイルを追加します。
次に、クリックしたタブ バーの名前に基づいてボックスの表示と非表示を制御します。
HTML data-*属性
1. 定義と使い方
data-* 属性は、ページまたはアプリケーションのプライベート カスタム データを保存するために使用されます。
data-* 属性は、すべての HTML 要素にデータを埋め込むことができます。
カスタマイズされたデータにより、ページのインタラクティブなエクスペリエンスが向上します (Ajax を使用したり、サーバー上のデータをクエリしたりする必要はありません)。
data-* 属性は次の 2 つの部分で構成されます。
1. 属性名には大文字を含めることはできません。また、data- の後に少なくとも 1 文字を指定する必要があります。
2. この属性には任意の文字列を指定できます。
注:カスタム属性プレフィックス「data-」はクライアントによって無視されます。
2. HTML 4.01 と HTML5 の違い
data-* 属性は HTML5 の新機能です。
3. 文法
<element data-*="somevalue">4. 属性値
| 価値 | 説明する |
| 何らかの値 | 属性値(文字列)を指定します。 |