753Note

備忘メモ

CSS "display: none;"で表示要素を切り替える

3つの要素を順に切り替えて表示する仕組み
 span要素を3つ横並びにしておく
 (初期値) span1要素のみを表示し、他の2つの要素は"display: none;"で非表示
 (表示要素クリック時) 次の要素を表示し、自分は"this.style.display='none'"で非表示
 <span id="span1" style="display: inline;"
  onclick="span2.style.display='inline', this.style.display='none'">Span1表示</span>
 <span id="span2" style="display: none;"
  onclick="span3.style.display='inline', this.style.display='none'">Span2表示</span>
 <span id="span3" style="display: none;"
  onclick="span1.style.display='inline', this.style.display='none'">Span3表示</span>