- 締切済み
【JS（Jquery）】表示切替 show(); hide();
お世話になります。 ただ今JSのライブラリ（Jquery)を利用してあるプログラムを書いております。 以下がそのスクリプトとなり、内容は、 配列「tBtn」の1番目がホバーされたら 配列「tBlo」の1番目を表示し、「tBlo」の１番目以外は非表示にする。 配列「tBtn」の２番目がホバーされたら 配列「tBlo」の２番目を表示し、…以下省略。 配列「tBtn」の1番目がホバーされたら 配列「tBlo」の1番目を表示するという動作は理解できるのですが、 「tBlo」の１番目以外を非表示にするにはどういう書き方をすれば よろしいでしょうか。 どなたかお知恵をお貸しください。 $(function(){ var tBtn = new Array( 'hk', 'tk', 'ho' , 'kt' ); var tBlo = new Array( 'test1', 'test2', 'test3' , 'test4' ); $.each(tBtn, function(i, item) { $("#" + this).hover(function(){ /* if(this != tBtn[i]){ $("#" + tBlo[i]).fadeOut(); } */ },function(){ return false; }); }); });
- mayumix2x
- お礼率0% (0/3)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
No1です。 No1の例では、class="a"、"b"…の対応で表示を設定していますが、単純に順番で決めてよいのなら、このclass設定ははずしてしまって、順番で判断するようにしてもよいですね。
- fujillin
- ベストアンサー率61% (1594/2576)
jqueryはよく知りませんが… 初期状態と、マウスアウトの動作が不明ですが、こんな感じ？ （displayで表示制御をしてますが、show,hideにしても同様のはず） <html> <head> <style type="text/css"> #tBtn button { width:50px; } #tBlo div { display:none; } </style> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function(){ $('#tBtn button').hover(function(){ var cn = this.className; $('#tBlo div').each(function(){ $(this).css({ display: this.className==cn?'block':'none'}); }); }); }); </script> </head> <body> <div id="tBtn"> <button class="a">hk</button> <button class="b">tk</button> <button class="c">ho</button> <button class="d">kt</button> </div> <hr> <div id="tBlo"> <div class="a">test1</div> <div class="b">test2</div> <div class="c">test3</div> <div class="d">test4</div> </div> </body> </html>
- 参考URL：
- http://semooh.jp/jquery/
