JavaScriptでURLを切り替える方法
- JavaScriptを使用して、A.phpページのリンクをクリックすると、C.phpページの特定のURLをB.phpに切り替える方法を知りたいです。
- C.phpページの td id="xxx" の部分をB.phpに切り替えることはできましたが、a hrefのURLをB.phpに切り替える方法がわかりません。再読み込みなしで対応する方法を教えてください。
- PHPの$_SESSION関数では対応できなかったため、JavaScriptを使用してC.phpページのa hrefのURLをB.phpに切り替える方法が知りたいです。詳しく教えていただけると助かります。
- ベストアンサー
文字・URLの切替えに関してです。
Javascript で次のようにしました。 (参考図) 上フレーム（A.php）name="A" 中フレーム（B.php）name="B" 下フレーム（C.php）name="C" ※ 縦に３段組のレイアウト。 ▼ A.php <script language="JavaScript"> function abc(url){ parent.B.xxx.innerText=url; } </script> </head> <body> <a href="B.php" target="B" onClick="abc('B.php');">C.phpページのURLを切替える</a> </body> ▼ C.php <body> <td id="xxx">D.php</td> <ul> <li><a href="D.php" target="B">切り替えページ</a></li> </ul> </body> それで A.phpページのリンクをクリックすると・・・ C.phpページの td id="xxx" の D.php のところは、B.php と切替えることはできたのですが C.phpページの a href のところのURL(D.php)を B.php と切替えるには、どうしたら良いのでしょうか？ ちなみに、C.phpページはリロードさせないので、PHPの $_SESSION 関数での対応は無理でした。 中途半端な知識で対応できず、苦しんでおります。 ちなみに、分かりやすく詳しく教えて頂けると非常に助かります。 もし宜しければ何方か、どうか教えて下さい。宜しくお願いします。
- yorosiku_orz
- お礼率45% (19/42)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
htmlの全体像が見えないので、局所的な解決案を。 aタグのhrefを書き換える方法は下記です。 ------------------------------------- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <style> </style> </head> <body> <a id="d" href="D.php" target="B">切り替えページ</a> <script> document.getElementById('d').href = 'B.php'; </script> </body> </html> ------------------------------------- 何かがわからなかったらまた質問下さい。
関連するQ&A
- ページ切り替えの方法についてです。
最近まで、フレーム(FRAMESET)でレイアウトを組んでいました。(汗) (参考図) 上フレーム（A.php）name="A" 中フレーム（B.php）name="B" 下フレーム（C.php）name="C" ※ 縦に３段組のレイアウト。 ぞれで、フレームは HTML5 では廃止なり、使用は良くないと言う事で参考図のようなレイアウトを CSSで組んだんですが・・・ 例えば、フレーム使用では 中フレームの B.phpを D.phpページに切り替えをする場合は <a href="D.php" target="B" >Dページ</a> このように target で 簡単に中フレームに D.phpページを表示させる事ができますが CSSでこのような仕組み(ページ切り替え)をする場合はどうやったら良いのでしょうか？ イメージとしては・・・ (参考図) 上ヘッダー（#head） 中メイン （#main） 下フッター（#foot） ※ 縦に３段組のレイアウト。 上ヘッダー(#head)の場所で <a href="D.php" >Dページ</a> をクリックした時に 全体をリロードさせずに、中メイン(#main)の場所に、D.phpページを表示したいのです。 できるだけ色んなブラウザに対応する方法で教えて頂けると助かります。 中途半端な知識で対応できず、苦しんでおります。 ちなみに、分かりやすく詳しく教えて頂けると非常に助かります。 もし宜しければ何方か、どうか教えて下さい。宜しくお願いします。
- 締切済み
- JavaScript
- iframeのurlをクリックで書き換えたい。
<iframe id="map" src="https://A.co.jp" width="800" height="450"></iframe> <ul> <li><a href="https://B.co.jp">Bサイト</a></li> <li><a href="https://C.co.jp">Cサイト</a></li> </ul> iframeのURL「https://A.co.jp」を下のリンクをクリックすることで「https://B.co.jp」などに書き換えて表示を変更したいと考えています。 JavaScriptで可能と思うのですが、どのようにしたらいいのかわかりません。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- phpの文字列表示
phpで質問です。 ランダムな数字、1～100の間で70以上が出れば表示を変える というプログラムをしたのですが、 70以上が出るとなぜか表示が崩れます。 正常に表示する方法を教えてください。 コード $rand = mt_rand(1,100); echo $rand; if($rand<70) { echo '<ul> <a href="#"><li>A</li></a> <a href="#"><li>B</li></a> <a href="#"><li>C</li></a> <a href="index.php"><li>D</li></a> </ul>'; } else { echo '<ul><a href="example_sub4.php" target="_brank"><li>close</li></a> <a href="#"><li>E</li></a> <a href="#><li>F</li></a> <a href="index.php"><li>G</li></a>'; } ?>
- ベストアンサー
- PHP
- 同時に更新(リロード)について。
こんばんは。非常に悩んで困っています。 (参考図) ┌→上フレーム（A.php） │ │ aaa.php―┼→中フレーム（B.php） │ │ └→下フレーム（C.php） A.php ページ内のボタン【B】をクリックしたら、中フレームで B.php ページが表示される仕組みで・・・ その時、同時に下フレームの C.php ページにも更新(リロード)を掛けるような仕組はどうやったら良いのでしょうか？ 【参考】 ・ Javascript は利用せず。(利用したくない) ・ 上記の参考図の表示がずれていたら脳内変換で宜しくお願いします。 ・ ページはフレームを使用し、上フレーム・中フレーム・下フレームと縦に組んでいます。 ・ A.php ページ内のボタンは、次の様にリスト形式でリンク文字としてます。 <ul> <li><a href="B.php" target="B">B</a></li> </ul> 中途半端な知識で対応できず、苦しんでおります。 ちなみに、私は「PHP」の経験が浅いので、分かりやすく詳しく教えて頂けると非常に助かります。 もし宜しければ何方か、どうか教えて下さい。宜しくお願いします。
- 締切済み
- PHP
- ＣＳＳ初心者です
初 挑戦です ビルダー１１を使って製作中です （ 項目をクリックすることで深い階層が現れるリストを製作しています ） いろんなサイトで調べているのですがイマイチ解りません 今 このサイトを参考にしています http://allabout.co.jp/gm/gc/377237/2/ でも、さっぱり解りません 理屈は解るのですが、 ・何処にＣＳＳを記入するのか ・JavaScriptソースをどこに記入するのか いろいろ、試しましたが上手くいきません 例 HTMLソース <ul> <li><a href="url">項目A</a> <ul> <li><a href="url">サブ項目A-1</a></li> <li><a href="url">サブ項目A-2</a></li> <li><a href="url">サブ項目A-3</a></li> </ul> </li> <li><a href="url">項目B</a> <ul> <li><a href="url">サブ項目B-1</a></li> <li><a href="url">サブ項目B-2</a></li> <li><a href="url">サブ項目B-3</a></li> </ul> </li> <li><a href="url">項目C</a> <ul> <li><a href="url">サブ項目C-1</a> <ul> <li><a href="url">サブサブ項目C-1-a</a></li> <li><a href="url">サブサブ項目C-1-b</a></li> <li><a href="url">サブサブ項目C-1-c</a></li> </ul> </li> <li><a href="url">サブ項目C-2</a></li> <li><a href="url">サブ項目C-3</a></li> </ul> </li> </ul> 例 ＣＳＳ a.menu { text-decoration: none; border: 1px solid #8080ff; background-color: #ccccff; padding: 1px; } 例 JavaScriptソース <script type="text/javascript"><!-- function sublist( target ) { var TargetList = target.parentNode.getElementsByTagName('ul'); if ( TargetList[0].style.display == 'none' ) { TargetList[0].style.display = 'block'; } else { TargetList[0].style.display = 'none'; } } // --></script> 初心者です 解りやすく アドバイスお願いします
- ベストアンサー
- CSS
- ドロップダウンリストの高さを、非表示のときは上に詰
初心者です。本当に初歩な質問で申し訳ありません。 ドロップダウンリストを作り、クリックしたときにサブメニューを表示したいのですが、 表示、非表示は切り替えられても、非表示のときに空欄ができてしまいます。 これを、非表示のときは上に詰めて表示するようにしたいのですが、その方法を 教えてください。 下記がそのソースになります。 <SCRIPT language="JavaScript"> <!-- function pullDown1(ss) { for(d0 = 0 ; d0 < ID.length ; d0 ++) { ID[d0].style.visibility = "hidden"; } ID[ss].style.visibility = "visible"; } //--> </SCRIPT> </HEAD> <BODY> <ol> <li><A href="javaScript:pullDown1(0)">メニューを表示する</A> <DIV id="ID" style="visibility:hidden;"> <ul> <li><A href="">A</A></li> <li><A href="">B</A></li> <li><A href="">C</A></li> <li><A href="">D</A></li> </ul> </DIV> </li> <li><A href="javaScript:pullDown1(1)">メニューを表示する</A> <DIV id="ID" style="visibility:hidden;"> <ul> <li><A href="">a</A></li> <li><A href="">b</A></li> <li><A href="">c</A></li> <li><A href="">d</A></li> </ul> </DIV> </li> </ol> </BODY> 以上、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- CSSのmarginが反映されません
HPを製作中メニューページを縞々のデザインにしようと下のようなCSSで製作をしているのですが、どうしても左に空白が出来てしまいます。 marginは0にしてあるのですが、どこか間違って居る所があるのでしょうか…自分で見直してもさっぱりわからないんです；； ::::CSS:::: #body{ text-align:center; font-family: 'HGS創英角ポップ体'; color:#5d5c70; width:100%; float:left; padding:180px 0px 0px 0px ; margin:0px; font-size:13px; background: #000000; } #body a{ width:100%; color:#5a5d73; } #body a:hover{ color:#7c7f95; } ul.list li { margin:0; padding:8px 0px 8px 0px; list-style: none; width:100%; } ul.list li.1 { background: #ffb6c1; } ul.list li.2 { background: #ffabbb; }ul.list li.3 { background: #ffa0b7; } ul.list li.4 { background: #ff95b4; } ul.list li.5 { background: #ff8ab3; } ul.list li.6 { background: #ff7fb2; } }ul.list li.7 { background: #ff74b2; } ul.list li.8 { background: #ff69b4; } ::::HTML:::: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <link rel="stylesheet" href="style.css" type="text/css" media="all"> <title>NO-NAME</title> </head> <body id="body" style="overflow:hidden;"> <ul class="list"> <li class="1"><a href="top" Target="right">TOP</a></li> <li class="2"><a href="about" Target="right">ABOUT</a></li> <li class="3"><a href="main" Target="right">MAIN</a></li> <li class="4"><a href="obi.jp/" Target="right">BLOG</a></li> <li class="5"><a href="nu0/" Target="right">MEMO</a></li> <li class="6"><a href="off" Target="right">OFF</a></li> <li class="7"><a href="bkm" Target="right">BKM</a></li> <li class="8"><a href="8797" Target="right">INDEX</a></li></ul> </div> </body> </html>
- 締切済み
- HTML
- タブ切り替えについて
更新情報を知らせるために、ヤフーのトップにあるトピック欄のようなものを作りたいのですが、どうすればいいでしょうか。 http://weble.org/2011/05/24/html-css-tab 上記のページを参考に、 <ul id="tab" class="tab clear"> <li><a href="#page1" class="blue">１</a></li> <li><a href="#page2" class="red">２</a></li> <li><a href="#page3" class="green">３</a></li> <li><a href="#page4" class="yellow">４</a></li> </ul> <ul> <li><div id="page1">11111 </div></li> <li><div id="page2">22222 </div></li> <li><div id="page3">33333 </div></li> <li><div id="page4">44444 </div></li> </ul> と書いてタブ1の時はpage1を、タブ2ではpage2の内容を、という風には出来たのですが、 下記のようなリストがあり、タブを「全て」「果物」「動物」「家電」と４つ作り、「全て」のタブでは更新情報を全て載せ、それ以外のタブでは各項目の更新情報のみ載せるという方法がわかりません。 2011/08/11 りんご 2011/08/03 みかん 2011/07/30 犬 2011/07/30 テレビ 2011/07/27 猫 また現在、リストの呼び出しは同html内からなのですが、このままですと更新が重なるごとに記述が長くなってしまい、トップページの編集に支障が出てしまうと思うのですが、呼び出しは同htmlではなくても可能なのでしょうか。 単純に"呼び出したいhtml#xxx"と入れても別画面に切り替わってしまい駄目でした。 上手く、内容を説明できず伝わりにくいかと思いますが、よろしくお願いいたします。
- 締切済み
- JavaScript
- li ３列表示
こんにちは、 下記のliを3列づつ表示したいのですが、 どのようにすればよいでしょうか？ （２列とかはあるのですが・・・tableにすべき？） <ul id="leftlist1"> <li><a href="#">a1</a></li> <li><a href="#">a2</a></li> <li><a href="#">a3</a></li> </ul> <ul id="leftlist2"> <li><a href="#">b1</a></li> <li><a href="#">b2</a></li> <li><a href="#">b3</a></li> </ul> <ul id="leftlist3"> <li><a href="#">c1</a></li> <li><a href="#">c2</a></li> <li><a href="#">c3</a></li> </ul>
- ベストアンサー
- CSS
- タブ切り替えの初期表示に関して
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
お礼
できました！ ありがとうございます。(感謝)
補足
早々のご回答ありがとうございます。 イメージとしては… 上フレーム A.php ページでリンククリックしたら、下フレーム C.php ページの aタグの hrefを書き換えたいのです。(汗) 説明不足ですみませんでした。改めて宜しくお願いします。