webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

tab panel 手順1

タブパネルを作る

手順1

  • ulを2組、id をそれぞれ'tab'と'panel'にする。そして2つのul をcontainerで囲う。
  • ul #tabの li に<a href="#tab1">を書き足す。
  • ul#panelの li に id=tab1 をくわえる。
  • ここが仕掛けの肝です。

f:id:ohta-felica:20160525005902p:plain

<body>
<div id="container">
<ul id="tab">
<li><a href="#tab1">html</a></li>
<li><a href="#tab2">css</a></li>
<li><a href="#tab3">javascript</a></li>
<li><a href="#tab4">jquery</a></li>
<li><a href="#tab5">actionscript</a></li>
</ul>

<ul id="panel">
<li id="tab1">htmlはむずかしいね</li>
<li id="tab2">cssはむずかしいね</li>
<li id="tab3">javascriptはむずかしいね</li>
<li id="tab4">jqueryはむずかしいね</li>
<li id="tab5">actionscriptはむずかしいね</li>
</ul>
</div>
</body>