• ベストアンサー

JavaScriptのテキストのON、OFF

よくHPにある、Q&Aのページのような、 「Q」のテキストをクリックすると、スル～っと「A」のテキストが出る JavaScriptのやり方を教えていただけませんか？ お手数おかけ致しまうが、よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 jQueryというものを利用すると比較的簡単に実装できます。 取り急ぎサンプルを作成しましたのでわからないところあったらまた聞いてください。 (HTMLとしてコピペしてあげればブラウザで確認できます) ==== サンプル.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScriptのテキストのON、OFF</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { // 全てのアンサー部分を取得 var $ans = $('.qa p'); $('#btn-allshow').click ( function() { // 全て表示ボタンが選択されたら表示 $ans.show(); }); $('#btn-allhide').click ( function() { // 全て閉じるボタンが選択されたら非表示 $ans.hide(); }); $('.qa h2').click ( function() { // h2がクリックされたらアニメーションを実行する // toggleは開いていれば閉じる、閉じれいれば開く // $(this).next()は.qa h2の次の要素、この場合pタグ領域 $(this).next().animate ( { height:'toggle', opacity:'toggle' }, { duration:'first'} ); }).mouseover ( function() { // h2にマウスカーソルが来た場合、スタイルシートの.hoverを追加 // すなわち、マウスカーソルを変更、背景色を変更 $(this).addClass ( 'hover' ); }).mouseout ( function() { // h2からマウスカーソルがいなくなった場合、スタイルシートの.hoverを削除 // すなわち最初の状態に戻る $(this).removeClass ( 'hover' ); }); }); </script> <style type="text/css"> h1 { background-color:#ccc; } div.qa { margin-left:10px; } div.qa > p { display:none;margin-left:10px;background-color:#fcc; } div.qa h2 { background-color:#ffc; } div.qa h2.hover { cursor:pointer;background-color:#f9c; } #controll { margin-left:10px; } </style> </head> <body> <h1>JavaScriptのテキストのON、OFF</h1> <div id="controll"> <button id="btn-allshow">全て表示</button> <button id="btn-allhide">全て閉じる</button> </div> <div class="qa"> <h2>Q1.あ行について教えて下さい。</h2> <p>あ行にはあ、い、う、え、おが存在します。</p> </div> <div class="qa"> <h2>Q2.か行について教えて下さい。</h2> <p>か行にはか、き、く、け、こが存在します。</p> </div> </body> </html>

zigaru
質問者

お礼

試してみたら出来ました！！ どうもありがとうございます。m(_ _)m すみません。恐れ入りますが、初心者なもので・・・ わからない所を教えていただいてもよろしいでしょうか。 （１）下記は何の設定なのでしょうか。 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> （２） このjQueryの設定は、html内に記述しなくても、例えばjsファイルとしてリンクして設定出来るのでしょうか。 お手数おかけ致しますが、２点よろしくお願い致します。

zigaru
質問者

補足

回答どうもありがとうございます！ 初心者のため設定に時間がかかりそうです。 試してからお返事させていただきますので、少々お待ちください。m(_ _)m

その他の回答 (2)

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.3

こんにちは。 回答遅くなりました。すいません。 1.これはGoogleのライブラリからjQueryを読み込んでいます。 自分のサーバにjQueryを置いてそこから読み込むかの違いです。 いちいちダウンロードしなくて済むのと、常に最新版を利用できる(または過去のバージョン)がメリットです。 例えばgoogle.load('jquery','1.6.2')とすれば1.6.2が使用できます。 2.もちろん外部ファイルに定義することが可能です。

zigaru
質問者

お礼

丁寧にどうもありがとうございました。 とても助かりました。m(_ _)m

  • utun01
  • ベストアンサー率40% (110/270)
回答No.2

書いたままいろいろしてたら出遅れてしまった;; No.1さんの方が素晴らしいサンプル作られているので、 あまりご参考になるか分かりませんが、一応張り付けておきます。 しょっぱい感じですが、必要最低限風です。 <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#suubox').animate({ height: 'toggle' }, 0); $('#btn1').click(function(){ $('#suubox').animate({ height: 'toggle' }, 'slow'); }); }); </script> <style type="text/css"> div { font-size: 18px; color: #000000; border: 1px solid #000000; } #btn1 { height: 20px; width: 60px; } #suubox { height: 100px; width: 200px; } </style> </head> <body> <div id='btn1'>ボタン</div> <div id='suubox'>test<br />test<br />test<br />test<br />test<br /></div> </body> </html>

zigaru
質問者

お礼

回答いただきありがとうございました。 貴重なお時間、感謝致します。m(_ _)m

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • テキストのリンクをON/OFFする

    Javascriptでテキストをクリックすると2箇所の画像を同時に変更することができたのですが、表示されている画像のテキストのリンクをはずす方法がわかりません。はじめは「ページ３＋４」のテキストのみがクリッカブルで、「ページ３＋４」のテキストをクリックすると、「ページ１+２」のテキストのみがクリッカブルになるようにしたいのです。表示されていない画像のテキストのみをクリッカブルにする方法をどなたか教えていただけますでしょうか？ <script language="JavaScript"> <!-- function swapImg(imgfile1,imgfile2) { document.swpimg1.src = imgfile1; document.swpimg2.src = imgfile2; } // --> </script> <div><img src="sample1.gif" name="swpimg1" /><img src="sample2.gif" name="swpimg2" /></div> <div><a href="javascript:swapImg('sample1.gif','sample2.gif')">ページ１+２</a>　<a href="javascript:swapImg('sample3.gif','sample4.gif')">ページ３＋４</a></div>

  • JavaScriptでテキストを隠したり開いたりするようなことを行いた

    JavaScriptでテキストを隠したり開いたりするようなことを行いたいのです。 A　B　C　 ○○○○○ △△△△△ □□□□□ Aをクリックすると ○○○○○ ●●●●● △△△△△ □□□□□ Bをクリックすると ○○○○○ △△△△△ ▲▲▲▲▲ □□□□□ というようにその下の部分隠してある文言が出るようなスクリプトが書きたいのですがわかりません。 参考URLだけでもいいので宜しくお願いいたします。

  • javascriptのオン、オフ

    よくjavascriptをオンにしてくださいというページを見ます。 実際javascriptのオン、オフの判断ってどのようにやっているのでしょうか。サーバ側？クライアント側？ 何かサンプルがあるページなどご存知の方教えてください。よろしくおねがいします。

  • Dreamweaver8でJavascriptの作成

    教えてください。HP作成初心者です。 仕事で社内HPを更新しなければならず悪戦苦闘しながら作業を行っております。FAQのページをQ＆A方式でQをクリックするとAが出てくる様にしたいという意見が出たためにその様な仕様にしなければならなくなりました。 ですが、Javascriptで指示をするまではわかったのですが、どの様に指示をしたらいいのかわかりません。 ソースにどの様に組み込ませたらいいのか、もしくは初心者でもわかりやすいサイトなどご存知でしたら教えてください。 よろしくお願いします。

  • javascriptでクリックしたリンクテキストを取得するには？

    javascriptを用いてクリックしたリンクのテキストを取得するにはどうすればいいでしょうか？ ページ読み込み時(onload)にリンクにonClickイベントをつけてクリックしたときにurlなどを取得することはできるのですが、リンクテキストをどうしても取得できません。 ページ内のそれぞれのリンクタグにそれぞれ異なるid要素をつけられればよさそうなのですが。。。 ページ内のリンクタグにidがついていないことしてください。

  • JavaScriptのオン／オフの使い分け

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="refresh" content="3;url=jtestOFF.html"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>JavaScriptのオン／オフ状態に応じて表示するページを変える</title> <script Language="JavaScript"> <!-- location.href = "jtestON.html"; // --> </script> </head> <body> しばらく、お待ちください。 </body> </html> 上記タグは某サイトの例文をコピペしたのもです。 http://time3.sakura.ne.jp/sub/QandA/diary/jscheck1.html 正しく動作するのですがJavaScriptがオンの時 ブラウザの「戻る」をクリックしてもページが元のページに戻りません。 何か良いお知恵はないものでしょうか？

  • クリックなどをするとテキストが強調表示されるjavascript

    こんにちは。 フレーム使用したWEBページを作成中です。 たとえばフレームAの「あいう」という文字をクリックすると フレームB内の「あいう」というテキスト(リンク等ではなく)が強調表示される、 というようなjavascriptはありますでしょうか。 あちこちの配布サイトを検索してみたのですが、キーワードが 適切でないためか、なかなか見つけられませんでした。 よろしくお願いします。

  • JavaScriptのイベントについて

    JavaScriptを使ってページのウィンドウ上でダブルクリックをした時 テキスト1の文字列を変更するようにしたいのですが、 下記のページを読み込むとページがロードすると同時に テキスト部分が変更されてしまいます。 addEventListenerの使い方が間違えているのでしょうか。 よろしくお願いいたします。 ---------------------------------------------------------------------- <body> <a id=id1>テキスト1</a> <script> i = document.getElementById("id1"); document.addEventListener("dblclick", addEL(), !1); function addEL(){ i.innerHTML="addEventListener!"; } </script> </body>

  • htmlTextで書き出したテキストからjavascriptへ

    flashCS4 AS3.0で作業しています。 htmlTextでダイナミックテキストに <a href="javascript:void(0)" onclick="hoge();">テスト１</a> と書き込んでます。 そのswfが貼付けてあるhtmlに書いてある <script type="text/javascript" language="javascript"> <!-- function hoge(){ window.alert('ボタンを押しましたね'); } // --> </script> を動かしたいのですがウマく行きません。 どなたかいい方法しっている方いませんか？

  • JavaScriptを埋め込むには？

    こんにちは。よろしくお願いします。 現在、JavaScriptの使用が禁止されているスペースで、HPを作成していますが どうしてもポップアップを使いたいので、JavaScriptの使用が可能なスペースで 画像をクリックするとリンク先にジャンプし、ポップアップが表示されるように作成しました。 そのURLを、JavaScript使用禁止のページの画像に埋め込んだところ 当たり前ですが、JavaScriptが埋め込まれた画像が表示され その画像をクリックしないと、リンク先ジャンプ＆ポップアップ表示されません。 JavaScript禁止ページの画像クリック→リンク先ジャンプ＆ポップアップとするには どのように作成すれば良いでしょうか？ JavaScriptに関して、全くの初心者なもので、分かりづらい説明ですが どうぞ、よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する