タブを使って案内

ホームページ改造王   新作へ   Yahoo!
ホームページ改造王です。
サンプル
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
.tab{font-weight:bold;font-size:10pt;background-color:#ffcccc;color:white;cursor:hand;}
.tab_on{font-size:10pt;background-color:#ccffff;color:black;}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
function tab_click( tab_o ){
event.off_tab = true;
if (event && event.src && event.src.indexOf("leftb") != -1)
{return;}
for (i = 0; i < tabs.length; i++)
{
tabs[i].className = "tab";
tab_menu[i].style.display = "none";
}
tab_menu[tab_o].style.display = "block";
tabs[tab_o].className = "tab_on";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<TABLE cellPadding=2 cellSpacing=0>
<TR>
<TD class="tab_on" id=tabs onclick=tab_click(0)>タイトル</TD>
<TD width="1">&nbsp;</TD>
<TD class="tab" id=tabs onclick=tab_click(1)>タイトル１</TD>
<TD width="1">&nbsp;</TD>
<TD class="tab" id=tabs onclick=tab_click(2)>タイトル２</TD>
</TR>
</TABLE>
<TABLE border="1" cellpadding="0" cellspacing="0" bordercolor="#ccffff" width="600" height="100">
<TR>
<TD valign="middle">
<TABLE border="0" cellpadding="0" cellspacing="0" id="tab_menu" width="100%">
<TR>
<TD valign="middle" align="center"><A href="http://www.act2cool.com/html/">ホームページ改造王です。</A></TD>
</TR>
</TABLE>
<TABLE border=0 cellPadding=0 cellSpacing=0 id=tab_menu style="display: none" width="100%">
<TR>
<TD valign="top" align="center"><A href="http://www.act2cool.com/kensyou/">懸賞生活応援団にいけます。</A></TD>
</TR>
</TABLE>
<TABLE border=0 cellPadding=0 cellSpacing=0 id=tab_menu style="display: none" width="100%">
<TR>
<TD valign="top" align="center"><A href="http://www.yahoo.co.jp/">ヤフーにけます。</A></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
サンプルにあるようにタブをクリックすればその案内がでます。
リンクしなくても正常に動きます。
<STYLE>でタブ部分を指定していますのでタブの色などを変えたければそこを変えて下さい。

タイトルにはそれぞれタブのタイトルが入ります。
後は<TABLE>なので普段扱うのと同じです。

コピーペーストしてこちらですぐにテストできます。





b-click

サンプルを利用したら、http://www.act2cool.com/html/へリンクしていただければ嬉しいです。
バナーはこちらにあります。
検索サイトから直接このページに来られた方はこちらがトップです。