- ベストアンサー
B1～H1のボタンやリンクをクリックしたらiA1に表示する方法
- B1～H1の各ボタンやリンクをクリックしたら、iA1に表示する方法について教えてください。
- 参考サイトやスクリプトを教えていただけませんか？B1～H1のいずれかをクリックすると、id=A1に関連情報が表示されるようにしたいです。
- H1表示用のボタンやリンクを押すと、「テスト２です。」がid=A1に表示されるようにしたいです。どうすれば実現できますか？
- saya_batou
- お礼率61% (8/13)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- leap_day
- ベストアンサー率60% (338/561)
関連するQ&A
- 「続きを読む」ボタンを押すと全文が表示されるしくみ
特にニュースサイトでよく見かけるのですが、テキストの全文が長いときに初めは数行のみ表示しておき「続きを読む」あるいは「全文表示」、「詳細表示」といったリンクボタンを押すとサッと全文が現れるというしくみを自サイトでも実現したいと考えています。 文章が部分表示されている最初のページが01a.htmlだとしてボタンを押すと全文が記載されている01b.htmlが表示されるというしくみではどうやらなく、ソースを見るとJavascriptを使っているのでしょうか、あらかじめ用意してあった<div>～</div>がボタンクリックで表示されるらしいのです。 当方のサイトにおいてこのしくみを実現したいページ数がけっこうあり、いちいちaページ、bページを用意するとファイル数が倍になるので「別ファイルを用意する」という方法は避けたい。 実現する方法を具体的にご教授ください。 ※<div>タグにはこだわりません。 参考URL http://headlines.yahoo.co.jp/hl?a=20071116-00000164-mai-socc
- ベストアンサー
- JavaScript
- onclickで表示/非表示させている動きに、別ページからリンクさせるには
JavaScript初心者です。 A.htmlを作成し、リンクをクリックするとidとnumberを呼び出すことで、同じhtml内に存在する3つのページが1つだけ表示されるように、cssとJavaScriptで表示/非表示させています。 【JavaScript】 function Page(id, nu){ Num = new Array ('01', '02', '03'); for (i=0; i<3; i++) { if(Num[i] == num){ document.getElementById(id + Num[i]).style.display = "block"; } else { document.getElementById(id + Num[i]).style.display = "none"; } }; } 【CSS】 #test01 {display:block;} #test02 {display:none;} #test03 {display:none;} 【html】 <a href="javascript:void(0);" onclick="Page('test','01')">link1</a> <a href="javascript:void(0);" onclick="Page('test','02')">link2</a> <a href="javascript:void(0);" onclick="Page('test','03')">link3</a> <div id="test01"> ・・・ </div> <div id="test02"> ・・・ </div> <div id="test03"> ・・・ </div> このとき別のhtml(B.html)から、A.htmlのid="test02"が表示された状態にリンクを作成することはできるのでしょうか？ 恐れ入りますがよろしくお願い致します。
- ベストアンサー
- JavaScript
- クリックで表示、非表示するメガメニュー
クリックで表示して再度クリックすると非表示になるメガメニューを作ろうと思ってます。 下記のページを参考にjQueryでマウスオーバーによるメガメニューは作成しました。 http://www.skuare.net/test/jmegadropdown.html ただ、jQueryどころかjavascriptも昔少しやった程度しか知識がありませんので、ソースはほぼ上記のページと同じです。 これをクリックでメニュー表示して、再クリックで非表示にするにはどうしたらよいでしょうか？ 具体的にはマイクロソフトのページの上にあるようなメニューです。 http://www.microsoft.com/ja-jp/default.aspx 自分の今の知識でjavascriptを使って書いたコードは下記のとおりです。 このように書いていけば出来るとは思うのですが、もっと効率よく出来る方法はあるでしょうか？ よろしくお願いします。 function test1() { $("#topnav li .products1 .sub").toggle(); $("#topnav li .sale1 .sub").css("display", "none"); } function test2() { $("#topnav li .products1 .sub").css("display", "none"); $("#topnav li .sale1 .sub").toggle(); } <ul id="topnav"> <li> <a href="#" class="products" onclick="test1()">Products</a> <div class="products1"> <div style="opacity: 0; display: none; width: 600px;" class="sub"> <ul> <li><h2><a href="#">menu1</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> <ul> <li><h2><a href="#">menu2</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </div> </div> </li> <li> <a href="#" class="sale" onclick="test2()">Sale</a> <div class="sale1"> <div style="opacity: 0; display: none; width: 450px;" class="sub"> <ul> <li><h2><a href="#">menu</a></h2></li> <li><a href="#">Link - 1</a></li> <li><a href="#">Link - 2</a></li> <li><a href="#">Link - 3</a></li> <li><a href="#">Link - 4</a></li> </ul> </div> </div> </li>
- ベストアンサー
- JavaScript
- テキストやリンクの表示・非表示
Javascriptでテキストやリンクの表示や非表示をできるようにしたいです。 基本はテキストやリンクを非表示にして、”表示”リンクを表示させ、 ”表示”リンクをクリックすると、テキストと”非表示”リンクを表示させます。 しかし下のソースで実行をすると 最初、”表示”リンクのみ表示→”表示”リンクをクリック 次、テキストと”非表示”リンクを表示→”非表示”リンクをクリック 次、全て非表示 と、なってしまい、再度表示させることができなくなってしまいます。 よい解決方法があったら教えてください。 よろしくお願いします。 ========================================================== <html> <head> <title>表示・非表示テスト２</title> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script language="javascript"> <!--// var typ; var typ2; function setDisplay(typ,typ2){ document.getElementById("myText").style.display = typ; document.getElementById("myText2").style.display = typ2; } //--> </script> </head> <body> <DIV ID="myText" style="display:none"> Display Sample<br> <a href="javascript:setDisplay('none','blcok');">非表示</a><br> </DIV> <br> <DIV ID="myText2"> <a href="javascript:setDisplay('block','none');">表示</a><br> </DIV> <br> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptでテキストを表示・非表示・・・
こんばんは。お世話になります。 JavaScriptでテキストがボタンを押すと表示/非表示と切り替わるようにしたいです。 サイトを参考に試してみましたが一か所しか表示/非表示となりませんでした。 1行おきに表示/非表示としたいのでブロック単位では指定出来ません。 display構文を使って作りました。 div idがそれぞれの部分に必要かと思い、div id="○○a"、div id="○○b"という風に付けましたがうまくいきませんでした。 ↓このような形にしたいです あいうえおかきくけこ サシスセソタチツテト ←この行を表示/非表示 なにぬねのはひふへほ マミムメモヤユヨ ←この行を表示/非表示 こういう風なように打ちました。 あいうえおかきくけこ<br> <div id="disp">サシスセソタチツテト</div><br> なにぬねのはひふへほ<br> <div id="disp">マミムメモヤユヨ</div><br> <form> <input type="button" value="表示" onclick="Hyoji1(0)"> <input type="button" value="非表示" onclick="Hyoji1(1)"> </form> <script type="text/javascript"> <!-- function Hyoji1(num) { if (num == 0) { document.getElementById("disp").style.display="block"; } else { document.getElementById("disp").style.display="none"; } } // --> </script> どの辺りを間違っているでしょうか?宜しくお願い致します。
- ベストアンサー
- JavaScript
- 表示する方法をご教授ください
いまJavaScriptを覚えていますがどうしてもわかりません。 どなたかご教授ください。 ////////////////////////////////////////////////////////////////////////// <head> <style type="text/css"> div { display: none ; margin: 10px ; } </style> </head> <body> <p> 問題1 </p> <form action="#"> <input type="button" id="bt1" value="ボタン(a)" onclick="hyouzi()" accesskey="a"/> </form> <div id="ans1"> 答え1 </div> <p> 問題2 </p> <form action="#"> <input type="button" id="bt2" value="ボタン(b)" onclick="hyouzi()" accesskey="b"/> </form> <div id="ans2"> 答え2 </div> </body> ////////////////////////////////////////////////////////////////////////// ボタン（a）をクリックしたら答え１、ボタン（b）をクリックしたら答え2をJavaScriptで表示されるようにしたいと考えています。 自分で考えたソースは以下になります ////////////////////////////////////////////////////////////////////////// <script type="text/javascript"> flag = false; function hyouzi() { a = element.getAttribute("id") ; b = "ans" + a.substr(2) ; if (flag) b.style.display="block"; else b.style.display="none"; flag = !flag; } </script> ////////////////////////////////////////////////////////////////////////// これでは動作しないのですが、考え方自体が間違っているのでしょうか？ 今後問題や答えを増やしても動作するようにしたいと考えています。 どのように記述すれば動作するのかどなたかご教授ください
- ベストアンサー
- JavaScript
- 折りたたみを全て開いて別ページに表示させるには？
自己解決できず、こちらで質問させてください。 どうぞよろしくお願いします。 社内サイトを作っています。 ブラウザ環境はIE8です。 toggleで項目ごとに展開・折りたたみの設定をしているページがあります。 初期値はdisplay:none;を指定しています。 ページ内に設定しているリンク（折りたたみ箇所ではない）をクリックした際 別ウインドウを開くようにしているのですが その別ウインドウには、toggle設定がされているページ(a.html)を iframe内に表示させたいのです。 別ウインドウを開いた時に、a.htmlの折りたたまれている個所を全て展開して表示させる事は できますでしょうか？ ご存知の方、アドバイス頂けないでしょうか。 ＜iframeに入れるページ(a.html)＞ <script> $(function(){ $("#list li div:nth-child(1)").addClass("title"); $("#list li div:nth-child(2)").addClass("content"); $(".h4").click(function(){ $(this).next().toggle(300); }); }); </script> <ul id="list"> <li> <h4 id="title">タイトル1</h4> <div id ="content" style="display:none;"> <p> あああああああああああああああああああああああ </p> </div> </li> ・ ・ ・ ・ </ul>
- ベストアンサー
- JavaScript
- タブ切り替えの初期表示に関して
jQueryを使用したタブの切り替えを実装しています。 下記ソースに関して、デフォルトの状態ですとselectedを設定した <div id="#a">の内容を初期表示します。 別ファイルからのリンクの飛び先が#bの時は初期表示を<div id="#b">にしたいのですが どうすればよいでしょうか？ <ul id="tab"> <li class="selected"><a href="#a">a</a></li> <li><a href="#b">b</a></li> <li><a href="#c">c</a></li> </ul> <div id="#a"> aの内容 </div> <div id="#b"> bの内容 </div> <div id="#c"> cの内容 </div> 下記のスクリプトを使用しています。 http://hyper-text.org/archives/2007/09/javascript_tab.shtml
- ベストアンサー
- JavaScript
- ボタンを押すとデータ表示、再度押すと非表示
ボタンを押すとデータが表示されるjqueryを利用したjavascriptがあります。 このボタンを再度クリックすると非表示にしたいと考えています。 奇数回クリック=表示 偶数回クリック=非表示 という形です。 ご教授いただきたくお願いいたします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#data").show(); }); </script> <button class="button18" id="btn0">ボタン</button> <div id="data" style="display:none"> データ </div>
- ベストアンサー
- JavaScript
- 指定位置に要素を追加する
<script type="text/javascript"> function test(){ var hako2 = document.createElement('div'); hako1.innerHTML = "TEST2"; var lk2 = document.getElementById('link2'); var li2 = lk2.parentNode; li2.appendChild(hako2); } </script> </head> <body> <div><a href="1" id="link1">1</a></div> <div><a href="2" id="link2">2</a></div> <div><a href="3" id="link3">3</a></div> <input type="button" onclick="test()" value="test"> </body> みたいなイメージなのですが、いかんせんスマートじゃありません できれば<div>で<a>を囲うのをやめたいのです。 ターゲットになる<a>の位置は固定ではなく前後に他の要素が入ることもあります <a href="2" id="link2">2</a>の次に<div>TEST2</div>を生成できればどんなのでも？いいのですが、何かいいやり方ありませんか？
- ベストアンサー
- JavaScript
お礼
お陰様で解決致しました。 本当に有り難う御座いました。 viewA1('B1')などと指定すれば良かったんですね。 本当に有り難う御座いました。
補足
ご回答ありがとうございます。 説明の仕方が悪くて申し訳ございません。。 こんな感じでです。 ----------------------------------------------- <script type="text/javascript"> <!-- function viewA1(id){ document.getElementById("A1").innerHTML = document.getElementById(id).innerHTML; } //--> </script> <title>test</title> </head> <body> <div id="A1"></div> <div id="B1" style="display:none;">テスト1です</div> <div id="C1" style="display:none;">テスト2です</div> <div id="D1" style="display:none;">テスト3です</div><br> <br> <a href="#" onclick="viewA1(?)">テスト1を表示します。</a><br> <a href="#" onclick="viewA1(?)">テスト2を表示します。</a><br> <a href="#" onclick="viewA1(?)">テスト3を表示します。</a> </body> </html> --------------------------------------------------------- お忙しい中ありがとうございます。 よろしくお願いします。