JavaScript:マウスクリック(ポップアップ) JavaScript web design

マウスクリック(別メニュー表示)

 サンプルプレビュー
m1
m2
m3
m1
m2
m3
m1
m2
m3
JavaScript:クリックによる別メニューの表示
 コード
スタイルシート部分
.u-box        { float: left; width: 100px}
.j1           { background:url(images/e0.gif);
                text-align: center;
                height:30px;
              }
.j11          { margin-top: 9px }
a.menu        {
                color: #fff;
                text-decoration: none;
                text-align: center;
                padding: 9px 0px;
                width: 100px;
                height:21px;
                display: block
              }
a:hover.menu  { color: #fc0 }
a:active.menu { color: #f90 }
.j1-moji      { clear: left; padding:5px }
#u1,#u2,#u3   {
                display: none; 
                border:1px solid #999;
                padding:5px;
                line-height:140%;
              }
JavaScript部分
var m =0;

function bo(x){

 if(document.getElementById){

  if(m!=0 && m==x){
   document.getElementById(m).style.display="none";
   m=0;
  }
  else{
   if(m!=0){
    document.getElementById(m).style.display="none";
   }
   document.getElementById(x).style.display="block";
   m=x;
  }
 }

 else if(document.all){
  if(m!=0 && m==x){
   document.all(m).style.display ="none";
   m=0;
  }
  else{
   if(m!=0){
    document.all(m).style.display = "none";
   }
   document.all(x).style.display = "block";
   m=x;
  }
 }
}
html部分
<div class="u-box">
 <div class="j1">
  <div class="j11">
   <a href="javascript:bo('u1')" class="menu">menu1</a>
  </div>
 </div>
 <div id="u1">m1<br>m2<br>m3</div>
</div>

<div class="u-box">
 <div class="j1">
  <div class="j11">
   <a href="javascript:bo('u2')" class="menu">menu2</a>
  </div>
 </div>
 <div id="u2">m1<br>m2<br>m3</div>
</div>

<div class="u-box">
 <div class="j1">
  <div class="j11">
   <a href="javascript:bo('u3')" class="menu">menu3</a>
  </div>
 </div>
 <div id="u3">m1<br>m2<br>m3</div>
</div>

<div class="j1-moji">ボタンクリックに〜</div>
 解説
m1
m2
m3
赤枠のボックスは初期値はスタイルシートのdisplay:noneにより非表示。クリック時はdisplay:blockにより表示
※全体の流れは、クリック時に表示されたボックス名を変数mに代入する、次にクリックされた時、mに代入されたボックスを非表示にして、新しいボックスを表示
※JavaScript部分でのdocument.allはIE4.0用です
※コードでaタグでtitleを省略しております、またコードの途中で改行しております

※NN4、IE4.5(Mac)以前のブラウザに対応しておりません。(ウィンドウズのIE5/IE5.5/IE6だけででシェア95%と言われいる為です)

※記述は独自で制作したものであり、正規な記述方法では無い場合があります。また間違っている所やもっと良い方法等ありましたらご連絡下さい。
|   Link  |   Profile  |   Sitemap  |