テーブルタグの表示切り替え改
前のページのスクリプトに下３つを追加。
下３つは、Netscape 6 と Internet Explorer 5 以外でも動く？
全てを閉じる改(menu数６)
<script type="text/javascript">
<!--
function showhide(id){
var menu=6;
var i=1;
if(document.getElementById){
if(document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
for(i=1; i<=menu; i++){
document.getElementById("id"+i).style.display = "none";
}
document.getElementById(id).style.display = "block";
}
}
}
//-->
</script>他テーブルを非表示
Netscape 6 以上と Internet Explorer 5 以上で動く？
Netscape 7.1 と Internet Explorer 5.16で確認しました。
| このテーブルは初期状態では非表示に設定されています。 |
| スクリプトの「else」以降にリンクを開く前に 全てを閉じる命令を追加しました。 |
| 他は閉じましたか？ |
| 対応ブラウザ以外では、「document.layers[id].visibility」と 「document.all(id).style.visibility」を使えばできるらしいが レイアウトとかを切替えの度に変更しないとだめみたい。 |
Netscape Communicator 4.7 で動く？
| このテーブルは初期状態では非表示に設定されています。 |
| スクリプトにリンクを開く前に全てを閉じる命令を 追加しました。下の赤字部分です。 |
| メニュー以下のレイヤは、ひとまとめで移動するようになっているけど、 移動する分の余白がないと下がかくれてしまう。 |
| 対応ブラウザ以外では、「document.layers[id].visibility」を 使ってみたが、レイアウトとかを切替えの度に変更しないとだめ。 layerの動かす数とかいまいちわからない。適当に合わせたm(_ _)m |
http://www.west-mira.jp/javascript/etc/TreeMenu5.html
上記のところのスクリプトを参考にしました。
<script language="JavaScript">
<!--
function hyouji(id_n){
id_n=id_n.substr(2,1);
if(document.layers){
lay_n=document.layers.length/2;
listname=document.layers["id"+id_n];
subname=document.layers["sub"+id_n];
if(listname.visibility == 'show'){
listname.visibility='hidden';
flag=1;
} else {
for(j=1; j<lay_n; j++){
if(document.layers["id"+j].visibility == 'show'){
lay_y=document.layers["id"+j].clip.height;
for(k=j+1; k<lay_n+1; k++){
document.layers["sub"+k].moveBy(0,-lay_y);
}
document.layers["id"+j].visibility='hidden';
}
}
listname.visibility='show';
lay_y=subname.pageY+subname.clip.height;
lay_x=subname.pageX;
listname.top=lay_y;
listname.left=lay_x;
flag=0;
}
mm=parseInt(id_n);
lay_m=lay_n+1;
if(mm<lay_m){
for(i=mm+1; i<lay_m; i++){
lay_y=document.layers["id"+id_n].clip.height;
if(flag == 1){
document.layers["sub"+i].moveBy(0,-lay_y);
} else {
document.layers["sub"+i].moveBy(0,lay_y);
document.layers["id"+i].moveBy(0,lay_y);
}
}
}
}
}
if(document.layers){
document.write('<style type="text/css"><!--');
document.write('.NN{position:absolute;visibility:hidden;}');
document.write('--></style>');
}
//-->
</script>
<div id="sub1" style="position:relative;visibility:visible;margin:0px;padding:0px 1em;">
<layer name="sub1">
<a href="javascript:showhide('id1')">...省略...</a>
</layer></div>
<div class="NN" id="id1" style="margin:1.5em 0px 0px 2em;">
<table class="NC" border="1" cellspacing="0" cellpadding="10">
...省略...
</table>
</div>
<br>
<div id="sub2" style="position:relative;visibility:visible;margin:0px;padding:0px 1em;">
<layer name="sub2">
<a href="javascript:showhide('id2')">...省略...</a>
</layer></div>
<div class="NN" id="id2" style="margin:1.5em 0px 0px 2em;">
<table class="NC" border="1" cellspacing="0" cellpadding="10">
...省略...
</table>
</div>
<br>
<div id="sub3" style="position:relative;visibility:visible;margin:0px;padding:0px 1em;">
<layer name="sub3">
<a href="javascript:showhide('id3')">...省略...</a>
</layer></div>
<div class="NN" id="id3" style="margin:1.5em 0px 0px 2em;">
<table class="NC" border="1" cellspacing="0" cellpadding="10">
...省略...
</tr>
</table>
</div>
<br>
リストの下３つのみ Netscape Communicator 4.7 の命令を加えてある。
<div id="sub4" style="position:relative;visibility:visible;margin:0px;padding:0px 1em;">
<layer name="sub4">
<a href="JavaScript:hyouji('id4');showhide('id4');">...省略...</a>
</layer></div>
<div class="NN" id="id4" style="margin:1.5em 0px 0px 2em;">
<table class="NC" border="1" cellspacing="0" cellpadding="10">
...省略...
</table>
</div>
<br>
<div id="sub5" style="position:relative;visibility:visible;margin:0px;padding:0px 1em;">
<layer name="sub5">
<a href="JavaScript:hyouji('id5');showhide('id5');">...省略...</a>
</layer></div>
<div class="NN" id="id5" style="margin:1.5em 0px 0px 2em;">
<table class="NC" border="1" cellspacing="0" cellpadding="10">
...省略...
</table>
</div>
<br>
<div id="sub6" style="position:relative;visibility:visible;margin:0px;padding:0px 1em;">
<layer name="sub6">
<a href="JavaScript:hyouji('id6');showhide('id6');">...省略...</a>
</layer></div>
<div class="NN" id="id6" style="margin:1.5em 0px 0px 2em;">
<table class="NC" border="1" cellspacing="0" cellpadding="10">
...省略...
</table>
</div>
<br>
<layer name="sub7">
メニュー下の全て
</layer>
伊豆のページのメニューはこれらのスクリプトを使ってます。
http://kmyh.my.coocan.jp/bekkan/izu/izu.html
 |
 |
|
||
 |