CSS と JavaScript を使用したテキストまたは画像の表示と非表示

Web サイトでアプリケーション スタイルのエクスペリエンスを作成する

目次拡大

• 視聴者体験の向上
• 必要なもの
• コントロール リンク
• 表示および非表示にする Div
• Div を表示および非表示にする CSS
• 機能させるための JavaScript
• 考えられる問題

ダイナミック HTML (DHTML) を使用すると、Web サイトでアプリケーション スタイルのエクスペリエンスを作成できるため、ページ全体を完全に読み込む必要がある頻度を減らすことができます。アプリケーションでは、何かをクリックすると、アプリケーションがすぐに変更されて、その特定のコンテンツが表示されるか、回答が提供されます。

対照的に、通常、Web ページを再読み込みするか、まったく新しいページを読み込む必要があります。これにより、ユーザー エクスペリエンスがよりばらばらになる可能性があります。顧客は、最初のページが読み込まれるまで待ってから、2 番目のページが読み込まれるまで待つ必要があります。

クリス・シュミット/ E + /ゲッティイメージズ

視聴者のエクスペリエンスを向上させるために使用する

DHTML を使用して、このエクスペリエンスを改善する最も簡単な方法の 1 つは、 分周 要素は、要求されたときにコンテンツを表示するためにオンとオフを切り替えます。あ div要素 Web ページの論理的な区分を定義します。 div は、段落、見出し、リンク、画像、さらには他の div を含むボックスと考えてください。

必要なもの

オンとオフを切り替えることができる div を作成するには、次のものが必要です。

• クリックしたときにオンとオフを切り替えて div を制御するためのリンク。
• 表示および非表示にする div。
• CSS div の非表示または表示のスタイルを設定します。
• アクションを実行する JavaScript。

制御リンク

制御リンクは最も簡単な部分です。別のページへのリンクを作成するだけです。とりあえず、放置 href 属性 空欄。

|_+_|

これを Web ページの任意の場所に配置します。

表示および非表示にする Div

表示および非表示にする div 要素を作成します。 div に一意の ID があることを確認してください。この例では、一意の ID は HTMLを学ぶ .

|_+_|

内容欄です。この説明テキスト以外は空白で始まります。左側のナビゲーション欄で学びたいことを選択してください。テキストは以下に表示されます。

HTMLを学ぶ

• 無料の HTML クラス
• HTML チュートリアル
• XHTML とは何ですか?

Div を表示および非表示にする CSS

CSS 用に 2 つのクラスを作成します。1 つは div を非表示にし、もう 1 つはそれを表示します。これには、表示と可視性の 2 つのオプションがあります。

表示はページ フローから div を削除し、可視性は表示方法を変更するだけです。一部のコーダーは好む 画面 、 しかし 時折 視認性 も理にかなっています。例えば：

|_+_|

可視性を使用する場合は、これらのクラスを次のように変更します。

|_+_|

非表示クラスを div に追加して、ページ上で非表示として開始されるようにします。

|_+_|

機能させるための JavaScript

このスクリプトが行うことは、div に設定されている現在のクラスを調べて、非表示としてマークされている場合は非表示に切り替えるか、またはその逆に切り替えることだけです。

これはほんの数行の JavaScript です。次のように頭の中に入れてください HTML ドキュメント （の前に

|_+_|

このスクリプトが行ごとに行うこと:

1. 関数を呼び出します 再表示する 、 と 分ける 表示または非表示にする正確な一意の ID です。

2. 変数 i を設定します もっている あなたのdivの値で。

3. 簡単なブラウザ チェックを実行します。ブラウザが対応していない場合 getElementById 、このスクリプトは機能しません。

4. div のクラスをチェックします。もし 隠れた に変更します。 再表示 .それ以外の場合は、次のように変更します 隠れた .

5. を閉じます もしも 声明。

6. 関数を閉じます。

スクリプトを機能させるには、もう 1 つ行う必要があります。リンクに戻り、javascript を href 属性に追加します。この href で div に名前を付けた正確な一意の ID を必ず使用してください。

|_+_|

おめでとう！これで、リンクをクリックするたびに表示および非表示になる div が作成されました。

注意すべき問題

このスクリプトは絶対確実ではありません。問題を引き起こす可能性のある状況がいくつかあります。

1. JavaScript がオンになっていません。 読者が JavaScript を持っていないか無効にしている場合、このスクリプトは機能しません。非表示の div は、読者が何をしても非表示のままです。これを修正する 1 つの方法は、非表示の div を noscript 領域に配置することですが、それらを正しく表示するには、それをいじる必要があります。

2. コンテンツが多すぎます。 これは、読者が必要なコンテンツだけを表示できるようにするための優れたツールですが、非表示の div 内に配置しすぎると、ページの読み込み方法に大きな影響を与える可能性があります。コンテンツが表示されていなくても、Web ブラウザーはコンテンツをダウンロードしていることに注意してください。そのため、非表示にするコンテンツの量には十分な注意を払う必要があります。

3. 顧客は理解していません。 最後に、顧客は、コンテンツを表示または非表示にするリンクをクリックすることに慣れていない可能性があります。アイコン（プラス記号と矢印がうまく機能します）またはテキストをいじって、顧客に何が起こるかを説明します。別の解決策は、div の 1 つを開いたままにし、他の div を閉じておくことです。これにより、アイデアを顧客に伝えることができるため、顧客は残りのコンテンツを開く方法をより迅速に把握できます。

このようなダイナミック HTML は、常にお客様と一緒にテストする必要があります。彼らがそれを理解して使用できると確信したら、これは、多くの表示スペースを占有することなく、Web ページに大量のコンテンツを表示するための優れた方法です。