DOJEUN's Notepad
 LISTへ 

【Javascript】div,tableを利用したサイドメニュー

div タグのOnClick Eventを受けて該当する table を見せる見せないにしてメニュー効果を図る。

<html>
<head><title>div,tableを利用したサイドメニュー</title>
<script language="javascript">
<!--
var selObj = "";  //以前選択メニューObjectの意味

function fncMenuSelect(p1){
    if(selObj != ""){document.getElementById(selObj).style.display="none";}
    document.getElementById(p1).style.display="";
    selObj = p1;
}
//-->
</script>
</head>
<body>
<div>地域名をクリックして見てください。</div>
<div OnClick="fncMenuSelect('tblMN01')" style="cursor_hand;width:6em;background-color:#AAEEDD">北海道・東北</div>
    <table id="tblMN01" border="0" cellspacing="0" cellpadding="0" style="cursor_hand;width:6em;display:none">
        <tr><td width="20"></td><td style="background-color_#DCDCDC;">北海道</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">青森県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">岩手県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">宮城県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">秋田県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">山形県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">福島県</td></tr>
    </table>
<div OnClick="fncMenuSelect('tblMN02')" style="cursor_hand;width:6em;background-color:#AAEEDD">関東</div>
    <table id="tblMN02" border="0" cellspacing="0" cellpadding="0" style="cursor_hand;width:6em;display:none">
        <tr><td width="20"></td><td style="background-color_#DCDCDC;">東京都</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">神奈川県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">埼玉県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">千葉県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">茨城県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">栃木県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">群馬県</td></tr>
    </table>
<div OnClick="fncMenuSelect('tblMN03')" style="cursor_hand;width:6em;background-color:#AAEEDD">甲信越・北陸</div>
    <table id="tblMN03" border="0" cellspacing="0" cellpadding="0" style="cursor_hand;width:6em;display:none">
        <tr><td width="20"></td><td style="background-color_#DCDCDC;">新潟県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">山梨県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">長野県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">富山県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">石川県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">福井県</td></tr>
    </table>
<div OnClick="fncMenuSelect('tblMN04')" style="cursor_hand;width:6em;background-color:#AAEEDD">東海</div>
    <table id="tblMN04" border="0" cellspacing="0" cellpadding="0" style="cursor_hand;width:6em;display:none">
        <tr><td width="20"></td><td style="background-color_#DCDCDC;">愛知県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">岐阜県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">静岡県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">三重県</td></tr>
    </table>
<div OnClick="fncMenuSelect('tblMN05')" style="cursor_hand;width:6em;background-color:#AAEEDD">関西</div>
    <table id="tblMN05" border="0" cellspacing="0" cellpadding="0" style="cursor_hand;width:6em;display:none">
        <tr><td width="20"></td><td style="background-color_#DCDCDC;">大阪府</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">京都府</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">兵庫県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">滋賀県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">奈良県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">和歌山県</td></tr>
    </table>
<div OnClick="fncMenuSelect('tblMN06')" style="cursor_hand;width:6em;background-color:#AAEEDD">中国</div>
    <table id="tblMN06" border="0" cellspacing="0" cellpadding="0" style="cursor_hand;width:6em;display:none">
        <tr><td width="20"></td><td style="background-color_#DCDCDC;">鳥取県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">島根県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">岡山県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">広島県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">山口県</td></tr>
    </table>
<div OnClick="fncMenuSelect('tblMN07')" style="cursor_hand;width:6em;background-color:#AAEEDD">四国</div>
    <table id="tblMN07" border="0" cellspacing="0" cellpadding="0" style="cursor_hand;width:6em;display:none">
        <tr><td width="20"></td><td style="background-color_#DCDCDC;">徳島県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">香川県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">愛媛県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">高知県</td></tr>
    </table>
<div OnClick="fncMenuSelect('tblMN08')" style="cursor_hand;width:6em;background-color:#AAEEDD">九州・沖縄</div>
    <table id="tblMN08" border="0" cellspacing="0" cellpadding="0" style="cursor_hand;width:6em;display:none">
        <tr><td width="20"></td><td style="background-color_#DCDCDC;">福岡県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">佐賀県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">長崎県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">熊本県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">大分県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">宮崎県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">鹿児島県</td></tr>
        <tr><td></td><td style="background-color_#DCDCDC;">沖縄県</td></tr>
    </table>
</body>
</html>