CSSとJavaScriptを使用してテキストまたは画像を表示および非表示

ウェブサイトにアプリケーションスタイルのエクスペリエンスを作成する

ダイナミックHTML （DHTML）を使用すると、ウェブサイト上でアプリケーションスタイルのエクスペリエンスを作成し、ページ全体の読み込み頻度を減らすことができます。 アプリケーションでは、何かをクリックすると、アプリケーションが直ちにその特定のコンテンツを表示するか、またはあなたの答えを提供するように変更されます。

対照的に、通常、ウェブページをリロードするか、新しいページ全体をロードする必要があります。 これにより、ユーザーエクスペリエンスがよりばらばらになります。 顧客は、最初のページが読み込まれるのを待ってから、2番目のページが読み込まれるまでもう一度待つ必要があります。

＆lt; div＆gt;を使用する ビューア体験を向上させる

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

あなたが必要とするもの

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

• クリックするとdivをオン/オフすることでdivを制御するリンク
• 表示して非表示にするdiv
• divのスタイルを隠すか見えるようにするCSS
• アクションを実行するJavaScript

制御リンク

制御リンクは最も簡単な部分です。 他のページと同じようにリンクを作成するだけです。 今のところ、href属性は空白のままにしておきます。

HTMLを学ぶ

あなたのウェブページのどこにでも配置してください。

部門を表示して非表示にする

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