人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JavascriptをつかったHP作成での質問です。
以下のようなことをやりたいと思ってます。
<A><B>
と書かれた文章があり、<A>にオンマウスすると、
<A><B>
<C><D>
というふうにその下に新しいテクストが表示されます。そしてまたたとえば、<C>にオンマウスすると、
<A><B>
<C><D>
<E><F>
のように表示されます。たとえばその状態で、つぎに<B>にオンマウスすると
<A><B>
<G><H>
というふうに表示されます。あるいはまた<A>にオンマウスしたのなら
<A><B>
<C><D>
というふうに表示されます。つまりだんだん増えていく入れ子構造のテクストをつくりたいと思っています。

「イヌでもわかるJavaScript講座」さんを参考にしましたが思うようにはいきませんでした。
http://www.red.oit-net.jp/tatsuya/java/setumei2.htm
ためしに作ってみたのが以下のページです。
http://www.lunatic-seven.com/javasample1.htm
(一行目→二行目→三行目、と
なんやかやうまくいっているかのように思えますが、つぎに同じことをくりかえすと、二行目から三行目へいくときに二行目が白紙になってしまいます。)
どうすればうまくいくでしょうか。あるいは、参考になるようなホームページはあるでしょうか。
ぜひとも教えてください。

●質問者: shikakun
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:JavaScript いるか だんだん イヌ テクスト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● susie-t
●10ポイント

myBeforeID,myBeforeID2の初期値および判定値"id1"と"id2"に対応する要素が見当たらないのですが・・・。

2回目以降おかしくなるのはmyBeforeID2が"id2"でなくなって、二度と戻らなくなるためです。

とりあえず動かすならmyIn関数に

 myBeforeID2 = "id2";

を追加してください。(この場合、IDというよりそのレベルのメニューが表示されているどうかのフラグですね。)

ただ、この作りで入れ子を増やすのはちょっと大変ですね・・・。

◎質問者からの返答

回答ありがとうございます。

ただぼく自身まったくのド素人なので、もうすこし噛み砕いて説明していただけると助かります。

できればサンプルコードかなにかを書いていただけるとありがたいです。


2 ● Numeric
●60ポイント ベストアンサー

表示中のタグを、myBeforeIDとmyObjの2つで管理するとわかりづらくなってしまいます。

なので、myObjのみで管理するようにしました。

また、myIn2でmyObjを上書きしていたので、myObj2という変数を作りました。

とりあえず動くようになったので、サンプルコードを貼っておきます。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<TITLE></TITLE>
<style>

body{
padding:40px;
font-family:Verdana;
font-size:11pt;
line-height:150%;
}


span{
visibility:hidden;
position:absolute;
background:white;
z-index:1;
}
a{
color:#666666;
text-decoration:none;
}

a:hover{
color:black;
}
</style>
</HEAD>
<BODY>
<SCRIPT language="JavaScript"><!--

myObj = null; //1階層目のタグ
myObj2 = null; //2階層目のタグ

myOP = window.opera; // OP
myN6 = document.getElementById; // N6
myIE = document.all; // IE
myN4 = document.layers; // N4
if (myOP) myBR="N6"; // ブラウザは OP6以上
else if (myIE) myBR="I4"; // ブラウザは IE4以上
else if (myN6) myBR="N6"; // ブラウザは NS6以上
else if (myN4) myBR="N4"; // ブラウザは NN4
else myBR=""; // ブラウザは 分からん

function myBrowserObj(myID){ // 使用中のブラウザの取得
 if (myBR=="N6") myRet=document.getElementById(myID).style;
 else if (myBR=="I4") myRet=document.all[myID].style;
 else if (myBR=="N4") myRet=document[myID];
 else myRet=0;
 return myRet;
}

function myIn(myID){ // マウスが乗った

 if(myObj){ // コメント表示中?
 myObj.visibility = "hidden"; // 1階層目のコメントを非表示

 if(myObj2){ // コメント表示中?
 myObj2.visibility = "hidden"; // 2階層目のコメントを非表示
 myObj2 = null; // 2階層目のタグを初期化
 }
 }
 myObj = myBrowserObj(myID); // 使用中のブラウザオブジェクト
 if(myObj){ // ブラウザ対応?
 myObj.visibility = "visible"; // 1階層目のコメントを表示
 }
}

function myIn2(myID2){ // マウスが乗った

 if (myObj2){ // コメント表示中?
 myObj2.visibility = "hidden"; // 2階層目のコメントを非表示
 }
 myObj2 = myBrowserObj(myID2); // 使用中のブラウザオブジェクト
 if(myObj2){ // ブラウザ対応?
 myObj2.visibility = "visible"; // 2階層目のコメントを表示
 }
}
// --></SCRIPT>
<pre>

<a href="" onmouseover="myIn('v0')">リンクA</a>、<a href="" onmouseover="myIn('v1')">リンクB</a>
<span id="v0"><a href="" onmouseover="myIn2('v3')">リンクC</a>、<a href="" onmouseover="myIn2('v4')">リンクD</a></span><span id="v1">1</span>
<span id="v3">3</span><span id="v4">4</span>

</pre>
</BODY>
</HTML>
◎質問者からの返答

ありがとうございます!

ほんとうに助かりました。

回答を参考に(?)行数をふやしてみました。

http://www.lunatic-seven.com/javasample2.htm

みなさん、ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ