HTML 5チュートリアルのdetails展開縮小ラベルの応用

3055 ワード

HTML 5チュートリアルのdetails展開縮小ラベルの応用
detailsラベルの登場は、このような収縮展開の効果のためにJSを再作成して実現する必要がなく、より良いユーザー体験をもたらしました.
注意:このラベルはChromeのみでサポートされています.
detailsには、summaryラベルのコンテンツテキストをマウスでクリックすると、detailsラベルの他のすべての要素が展開または縮小します.
detalisラベル:
ケース1:
HTML>

HTML 5毎日練習したdetails展開縮小ラベルの応用title></li> head> </li> </li> <body> </li> <details> </li> <summary>HTML 5|CSS 3|フォーラム|フロントエンド開発ネットワーク(W 3 Cfuns.com)!summary> </li> HTML 5フォーラム、CSS 3フォーラム、CSSフォーラム、WEBフロントエンド開発フォーラム、チュートリアルリソース完全無料のCSSフォーラム、最高のHTML 5/CSS 3フォーラムp></li>を作成 detalis> </li> body> </li> html> </li> detailsにsummaryラベルが存在しない場合はどうなりますか.実際にdetails要素にsummaryラベルがない場合、ブラウザは解析時にデフォルトの文字を提供します.例えば、「詳細を表示」などのローカライズされた文字があり、ブラウザは上下矢印などのアイコンを提供します.たとえば、次の例2はsummaryサブラベルが存在しない例です. ケース2:</li>HTML> </li> <html> </li> <head> </li> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </li> <title>HTML 5毎日練習したdetails展開縮小ラベルの応用title></li> head> </li> </li> <body> </li> <details> </li> HTML 5フォーラム、CSS 3フォーラム、CSSフォーラム、WEBフロントエンド開発フォーラム、チュートリアルリソース完全無料のCSSフォーラム、最高のHTML 5/CSS 3フォーラムp></li>を作成 details> </li> body> </li> html> </li> 時々、detalisのコンテンツをデフォルトで展開状態にする必要があります.どうすればいいですか? 実はHTML 5もすでに私たちのために考えています.もし方面の需要があれば、私たちは1つの属性を加えるだけでいいです.例えば、ケース3です. Openプロパティ: ケース1のコードを次のように変更します. ケース3: HTML> </li> <html> </li> <head> </li> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </li> <title>HTML 5毎日練習したdetails展開縮小ラベルの応用title></li> head> </li> </li> <body> </li> <details open> </li> <summary>HTML 5|CSS 3|フォーラム|フロントエンド開発ネットワーク(W 3 Cfuns.com)!summary> </li> HTML 5フォーラム、CSS 3フォーラム、CSSフォーラム、WEBフロントエンド開発フォーラム、チュートリアルリソース完全無料のCSSフォーラム、最高のHTML 5/CSS 3フォーラムp></li>を作成 details> </li> body> </li> html> </li> このように、HTML 5は私たちに確かに大きな便利さをもたらしました. 本文はJSコードステーションから変更またはオリジナル丨www.sitejsを収集する.cn|転載は出典を明記してください 本文の元の住所:http://www.sitejs.cn/sitejs-12740-1.html

低バージョンIEはHTML 5+CSS 3のウェブサイトの3種類の解決方案を正常に運行します

OSGEarthテキストの追加