javascript無しでタブ切り替えする

 

こんな切り替えをhtmlだけの記述で作ります。リンクさせるだけのhtml入門者向けです。

 

mew_01

作るファイル

menu.html  フェイシャル用(これをフォーマットにして、他の2つを作ります)

body.html  ボディエステコース用

special.html   スペシャルエステコース用

 

まず
menu.htmlを作成します。タブの部分はリストで記述します。

3つにスライスしておいたタブの画像は背景画像として指定します。

<ul class=”contbox”>
<li class=”subnav01″>
<a href=”menu.html”>フェイシャルエステコース</a></li>
<li class=”subnav02″><a href=”body.html”>ボディエステコース</a></li>
<li class=”subnav03″><a href=”special.html”>スペシャルエステコース</a></li>
</ul>

ではulの続きです。
ここはfacialのページなので、
<div class=”coursebox1″></div>を作り、
内部にfacialの概要テキストを記述します。
css背景グラデもここにかかっています。
その下は<div class=”coursebox2″></div>を作り
コース内容を記述します。

———————————————————————-
body.htmlとして次のファイルを作ります。
menu.htmlのソースをコピーペーストして開始です。
ulタブのcrrentがボディに変わった状態を別途コーディングします。

<ul class=”contboxbody”>
<li class=”subnav01″>
<a href=”menu.html”>フェイシャルエステコース</a></li>
<li class=”subnav02″><a href=”body.html”>ボディエステコース</a></li>
<li class=”subnav03″><a href=”special.html”>スペシャルエステコース</a></li>
</ul>
coursebox1 にボディエステコース概要
coursebox2 にボディエステコース内容を記述。

———————————————————————-

special.htmlとして最後のファイルを作ります。
同様にulタブのcrrentがスペシャルエステコースに変わった状態を別途コーディングします。
<ul class=”contboxsp”>
<li class=”subnav01″>
<a href=”menu.html”>フェイシャルエステコース</a></li>
<li class=”subnav02″><a href=”body.html”>ボディエステコース</a></li>
<li class=”subnav03″><a href=”special.html”>スペシャルエステコース</a></li>
</ul>

前のページと同様に
coursebox1にスペシャルエステコース概要

coursebox2にスペシャルエステコース内容を書きます。完成です。

mew_02

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>