- 締切済み
リンクの色を保持
iframeに表示されたページが、main.htmlのどのリンクを表示しているか分かるよう、main.htmlのページが表示された時に、リンク1の背景に色をつけたいと思っています。そして、リンク２がクリックされた時は、リンク２をクリックしていることが分かるよう、リンク１の背景の色をなくしリンク２の背景に色をつけたいと思っています。 つまり、 （１）main.htmlのページが表示された時に、リンク1の背景に色をつける （２）リンク２がクリックされた時は、リンク１の背景の色をなくしリンク２の背景に色をつける （３）リンク３がクリックされた時は、リンク２の背景の色をなくしリンク３の背景に色をつける をしたいと思っています。どのようにすればいいでしょうか？よろしくお願いします。 <--test.html--> <html> <head> <Meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <Title>テスト</Title> </Head> <body> <ul> <li><a href="main.html">main</a></li> </ul> </body> </html> <--/a.html--> <Html Lang="ja"> <Head> <Meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <Title>テスト</Title> </Head> <Body> <iframe src="http://yahoo.co.jp" name="test"></iframe> <ul> <li><a href="http://yahoo.co.jp" target="test">リンク1</a></li> <li><a href="http://www.goo.ne.jp/" target="test">リンク2</a></li> <li><a href="http://www.biglobe.ne.jp/" target="test">リンク3</a></li> </ul> </Body> </Html>
- burazer
- お礼率53% (7/13)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
http://oshiete1.goo.ne.jp/qa4475263.html これと同じでいいんじゃない？
スクリプトを</body>の直前に入れましょう！ <head></head>内に入れたければ window.onload = function(){ ここにdocument.body.onclick = ～ }
補足
お返事ありがとうございます。 実際に入れて動作させてみました。 しかし、「（１）main.htmlのページが表示された時に、リンク1の背景に色をつける」ってのが機能してません。 それから、説明不足だったとこがあるのですが、リンク以外の部分をクリックした場合にはそのリンクの背景色を保持しておきたいのです。そして、リンクがクリックされたら背景色を変更するって言う風にしたいのです。 で、「リンク以外の部分をクリックした場合・・・変更するって言う風にしたいのです。」の部分なんですが、具体的に言うと、下記サイト様の右側にある「content menu」ってとこのような感じです。 http://f32.aaa.livedoor.jp/~azusa/index.php?t=js&p=iframe もう少し早めに言えばよかったのですが、申し訳ありません・・・どうぞ、よろしくお願いします。
document.body.onclick = function(e){for(var i=0,p=(e?e.target:event.srcElement),o=document.getElementsByTagName('a');i<o.length;i++)o[i].style.backgroundColor = (o[i].target=='test' && o[i]==p)?'#f00':'';}
補足
お返事ありがとうございます。 サンプルスクリプトを元に下記のプログラムを作ってみましたが、動作しません。どこがいけないのでしょうか？よろしくお願いします。 <Html Lang="ja"> <Head> <script type="text/javascript"> <!-- document.body.onclick = function(e){for(var i=0,p=(e?e.target:event.srcElement),o=document.getElementsByTagName('a');i<o.length;i++)o[i].style.backgroundColor = (o[i].target=='test' && o[i]==p)?'#333333':'';} --> </script> </Head> <Body> <iframe src="http://yahoo.co.jp" name="test"></iframe> <ul> <li><a href="http://yahoo.co.jp" target="test">リンク1</a></li> <li><a href="http://www.goo.ne.jp/" target="test">リンク2</a></li> <li><a href="http://www.biglobe.ne.jp/" target="test">リンク3</a></li> </ul> </Body> </Html>
関連するQ&A
- 一つのボタンでページ移動iframeとリンクを開く
divで分けたpaｇｅ1とpage2で page1には <ul > <li><a href="http://www.apple.com/jp/"target="iframe1" >Apple</a></li> <li><a href="http://www.microsoft.com/japan/" target="iframe1">Microsoft</a></li> </ul> page2には <iframe name="iframe1"></iframe> page1の外部リンクをクリックした時に page2移動して、iframe内にＨＰを開く用にしたいのですが、できますか！？ targetでpage2にリンクを開くのはできましたが ページの移動ができません。 例えば、javascriptでpage1の外部リンクは全て移動するとか。。。 ど素人なので、違う簡単な方法があれば教えてください。
- 締切済み
- JavaScript
- クリックしたリンクの色を保持して、<object>にそのリンクを表示させる
下記のプログラムは、クリックしたリンクの色を保持して、<object>にそのリンクを表示させるようになっています。 プログラムの流れは、 （１）test1のリンクをクリックする （２）test1の背景を黄色/文字を太文字に変更 （３）<div id="objarea">にtest1のリンクを表示 （４）次のリンク（test2）がクリックされるまで（２）を保持。クリックされたらtest2のリンクの背景を黄色/文字を太文字に変更。 （５）（１）～（４）の繰り返し。 をすると言う、感じです。ですが、「（３）の<div id="objarea">にtest1のリンクを表示」と言う動作ができなく、リンクの色の保持しか動作しません。 どこがいけないのか分からなくて困っています。どうぞよろしくお願いします。 [サンプルプログラム] <style type="text/css"> <!-- .object { width: 400px; height: 400px; border: 1px solid #000000; } #menu a{ color:#0000ff; text-decoration:none; } #menu .hoge{ color:#ff0000; background-Color:#ffff00; font-weight:bold; } --> </style> <script type="text/javascript"> <!-- function changeObj(url){ document.getElementById('objarea').innerHTML = '<object data="' + url + '" type="text/html"><\/object>'; } //--> </script> <script type="text/javascript"> <!-- window.onload=function(){ setColor(); } function setColor(){ var menu=document.getElementById("menu"); var tags=menu.getElementsByTagName("a"); for (var i=0;i<tags.length;i++){ tags[i].onclick=function(){ var pp=this.parentNode.parentNode; var tags=pp.getElementsByTagName("a"); for (var i=0;i<tags.length;i++){ tags[i].className=""; } this.className="hoge"; } } } if (window.attachEvent){ window.attachEvent('onclick', setColor); window.attachEvent('onclick', changeObj); } else { window.addEventListener('onclick', setColor, false); window.addEventListener('onclick', changeObj, false); } //--> </script> </head> <body> <div id="objarea"> <object data="http://yahoo.co.jp" type="text/html"></object> </div> <ul id="menu"> <li><a href="#" onclick="changeObj('http://yahoo.co.jp'); return false;">test1</a></li> <li><a href="#" onclick="changeObj('http://www.google.co.jp/'); return false;">test2</a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- インラインフレーム内へのリンク
質問させて頂きます。 インラインフレーム内へのリンクが上手くいかなくて困っています。 name="main" でインラインフレームに名前を付け、外部からはtarget属性でtarget="main"と指定してリンクをはっているのですが、どういうわけだか新しいウインドウが開いてしまいます。 ソースをのせておきますので、どこがいけないのか御指導頂けないでしょうか。お願い致します。（暫定的にYAHOO!にリンクさせています） 以下ソース↓ <html> <head> <title>インラインフレーム</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body bgcolor="#FFFFFF"> <table width="500" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td height="17"><a href="http://www.goo.ne.jp" target="main">YAHOO!</a></td> </tr> <tr> <td height="300"><iframe border="0" frameborder="0" marginheight="0" marginwidth="0" name="main" scrolling="yes" style="border:solid 1pt cc0000" src="http://www.yahoo.co.jp" width="500" height="300"></iframe></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- 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
- Mozillaでツリーメニュー内のリンクが動作しない
http://oshiete1.goo.ne.jp/qa3462499.html こちらで質問した者ですが、その後原因がおぼろげながら掴めてきた＝質問の趣旨が変わってきたのと、のんびりしてもいられなくなったので こちらで再度質問させていただきます。 現在、フレームを使用したページを作成しています。上フレーム（top）と左下フレーム（menu）、右下フレーム（main）の構成です。 menuページでは以下のツリーメニュースクリプトを利用していますが、FireFoxなどのMozilla系ブラウザでは、下記ソースの<ul id="treemenu">以下のリンクが動作せず、ページを表示することができません。（IEでは動作します） 「スクリプトを削除する」もしくは「id="treemenu"を削除する」、または「リンクの上で右クリック→新しいタブ（ウィンドウ）で開く」ことで、Mozilla系ブラウザでもページが開くことは確認したのですが、どうしたらIE・Mozillaに関わらず、ツリーメニュー内できちんとリンクを機能させることができるのでしょうか？ ////////////////////////以下ソース////////////////////////// <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> //メニューIDを列記 var has_event_id = new Array("treemenu"); //初期動作 if(document.all || document.getElementById){ window.onload = ice_menu_initialize; } //関数郡 function ice_menu_initialize(){ for (i=0;i<has_event_id.length;i++){ menu_lists = document.getElementById(has_event_id[i]).getElementsByTagName("li"); for (j=0;j<menu_lists.length;j++){ if(document.all && document.getElementById){ menu_lists.item(j).onclick = ice_menu; }else if(document.getElementById){ menu_lists.item(j).addEventListener("click", ice_menu, false); } } } if(document.hasChildNodes){ var child_lists = document.getElementsByTagName("ul"); for (i=0;i<child_lists.length;i++){ if(child_lists.item(i).getAttribute("class")=="list-child" || child_lists.item(i).getAttribute("className")=="list-child"){ child_lists.item(i).style.display="none"; } } } } //メニュー開閉部 function ice_menu(evt){ var parent_tree_menu = this; if(parent_tree_menu.getElementsByTagName('ul').item(0)){ var child_menu = parent_tree_menu.getElementsByTagName('ul'); if (child_menu.item(0).style.display == 'block'){ child_menu.item(0).style.display = 'none'; for(i=0;i<child_menu.length;i++){ if(child_menu.item(i).getAttribute("class") == "list-child" || child_menu.item(i).getAttribute("className") == "list-child"){ child_menu.item(i).style.display = 'none'; } } }else{ child_menu.item(0).style.display = 'block'; } } if(document.all && document.getElementById){ event.cancelBubble=true; }else if(document.getElementById){ evt.stopPropagation(); evt.preventDefault(); } } </script> <title>メインメニュー</title> </head> <body> <ul> <li>●メニュー１ <ul> <li>▽<a href="test.html" target="main">サブメニュー１</a></li> <li>▽<a href="test.html" target="main">サブメニュー２</a></li> <li>▽<a href="test.html" target="main">サブメニュー３</a></li> </ul> </li> </ul> <ul> <li><span id="top">●メニュー２</span> <ul id="treemenu"> <li>▽<a href="test.html" target="main">サブメニュー１</a></li> <li>▽<a href="test.html" target="main">サブメニュー２</a></li> <li>▼<a href="#top">サブメニュー３</a> <ul class="list-child"> <li>┣<a href="minitest.html" target="main">ミニメニュー１</a></li> <li>┗ミニメニュー２</li> </ul> </li> <li>▼<a href="#top">サブメニュー４</a> <ul class="list-child"> <li>┣<a href="minitest.html" target="main">ミニメニュー１</a></li> <li>┗ミニメニュー２</li> </ul> </li> </ul> </li> </ul> </body> </html> //////////////////////////ここまで//////////////////////////// ※CSS用のクラスは紛らわしいので省いてあります。
- ベストアンサー
- JavaScript
- ulインラインブロックの文字数オーバーの非表示
<html> <body> <head> <style> li { float: left; width: 100px; font-size: 13px; text-align: center; padding: 4px; background: #ccc; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } </style> </head> <ul> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンクグーグルへリンクグーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> </ul> </body> </html> ULブロック要素をスタイルシートでインラインブロック要素にして、 横に並べたて表示しているのですが、表のように表示した時に、 そのliの一つ一つのブロックから文字がはみ出すことがあります。 overflow:hidden;を設定しても文字数の数だけ、liブロックを拡大して表示されてしまうのですが、 どのように表記すれば、うまくいくでしょうか？よろしくお願いします。
- 締切済み
- CSS
- 訪問済リンクを未訪問の状態に再び戻す方法
質問お願いします。 フレームで上部に組んだメニューボタンの訪問済リンクが、 ページを移動するごとに訪問済みが増えて、 どのページを現在、訪問しているのかわからなくなります。 訪問済リンクを未訪問の状態に再び戻す方法を教えてください。 CSS部分 body { background-color: #FFFFFF; margin:0; padding:0; } #menu{ position:absolute; top:0px; width:800px; height:219px; left:-1px; margin:0; padding:0; background-image:url(../topimage/title.gif); background-repeat:no-repeat; } #menu #bottom{ position:absolute; float:left; top:149px; width:800px; height:70px; left:0px; } #bottom ul{ list-style:none; padding:0; margin:0; } #bottom ul li{ padding:0; margin:0; float:left; } #bottom a.c,#bottom a.c:link { display:block; width: 115px; height:70px; background-image:url(../top/img/menu/b1.gif); background-repeat:no-repeat; background-position:0% 0%; } #bottom a.c:visited { background-position:100% 0%; } #bottom a.c:hover { background-position:33% 0%; } #bottom a.c:active { background-position:66% 0%; } 以下ボタン７つのソースがほぼ同じ為、省略します。 HTML部分 <div id="menu"> <div id="bottom"> <ul> <li><a href="../new/top.html" target="main" class="c"></a></li> <li><a href="../product/top.html" target="main" class="d"></a></li> <li><a href="../example/top.html" target="main" class="e"></a></li> <li><a href="../company/top.html" target="main" class="f"></a></li> <li><a href="../rinen/top.html" target="main" class="j"></a></li> <li><a href="../faq/top.html" target="main" class="g"></a></li> <li><a href="../info/top.html" target="main" class="h"></a></li> <li><a href="../recruit/top.html" target="main" class="i"></a></li> </ul> </div> </div>
- 締切済み
- HTML
- リンクについて。
こんにちは。 初歩的な質問ですが、リンクの貼り方が分かりません。 タグは、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> <!-- body{background-color:#ffffff;} table{font-size:medium;line-height:150%;color:#000000;} --> </style> </head> <body> <a href="about.html">about</a> <a href="1.html">main</a> <a href="nikki.html">nikki</a> <a href="link.html">link</a> </body> </html> としているのですが、「<a href="main.html">main</a> 」だけが、ページが表示できません。と、出てきます。「main.html]も、他のリンクと同じようにサーバーにアップしてあり、それを貼り付けています。 何故、リンクできないのでしょうか？
- ベストアンサー
- その他（インターネット・Webサービス）
- jQuery多層式アコーディオンメニューについて。
javascript勉強中です。 jQueryを使っての多層式アコーディオンメニューですが、現在hoverでメニューが開く仕様になっています。 これをclickすることで開くようにするにはどうしたらいいか、アドバイスいただければ幸いです。 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('ul.main li').hover(function(){ $('>ul:not(:animated)',this).slideDown('fast') },function(){ $('>ul',this).slideUp('fast'); }); }); </script> <style> ul.sub, ul.sub ul.sub{display:none;} </style> </head> <body> <ul class="main clearfix"> <li><a href="#">メニュー1</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> <li><a href="#">メニュー2</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> </ul> </body> </html> 何卒宜しくお願い申し上げます。
- 締切済み
- JavaScript
- cssで作成する多階層リスト
こんにちは。 cssで ・縦並びのリストに対して、マウスをもっていくと横にどんどん下位階層のリストが表示されるようする ・下位リストにマウスがいっても上位リストの選択の色はそのままにしたい 以上のように作成したいのですが、 そのcssの記述がわかりません。 色々サイトで探しましたが見つからず。。。 どなたか教えてください。 ◆HTML <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>多階層</title> </head> <body> <br> <div id="MainDiv"> <div id="gnav"> <ul> <li><a href="#">テスト(1)</a> <ul> <li><a href="#">てすと(1)-1</a> <ul> <li><a href="#">ＴＥＳＴ(1)-1-1</a> <ul> <li><a href="#">テスト(1)-1-1-1</a> <ul> <li><a href="#">TEST(1)-1-1-1-1</a></li> <li><a href="#">TEST(1)-1-1-1-2</a></li> <li><a href="#">TEST(1)-1-1-1-3</a></li> <li><a href="#">TEST(1)-1-1-1-4</a></li> <li><a href="#">TEST(1)-1-1-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-1-2</a> <ul> <li><a href="#">TEST(1)-1-1-2-1</a></li> <li><a href="#">TEST(1)-1-1-2-2</a></li> <li><a href="#">TEST(1)-1-1-2-3</a></li> <li><a href="#">TEST(1)-1-1-2-4</a></li> <li><a href="#">TEST(1)-1-1-2-5</a></li> </ul> </li> </ul> </li> <li><a href="#">ＴＥＳＴ(1)-1-2</a> <ul> <li><a href="#">テスト(1)-1-2-1</a> <ul> <li><a href="#">TEST(1)-1-2-1-1</a></li> <li><a href="#">TEST(1)-1-2-1-2</a></li> <li><a href="#">TEST(1)-1-2-1-3</a></li> <li><a href="#">TEST(1)-1-2-1-4</a></li> <li><a href="#">TEST(1)-1-2-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-2-2</a> <ul> <li><a href="#">TEST(1)-1-2-2-1</a></li> <li><a href="#">TEST(1)-1-2-2-2</a></li> <li><a href="#">TEST(1)-1-2-2-3</a></li> <li><a href="#">TEST(1)-1-2-2-4</a></li> <li><a href="#">TEST(1)-1-2-2-5</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">てすと(1)-2</a></li> <li><a href="#">てすと(1)-3</a></li> <li><a href="#">てすと(1)-4</a></li> </ul> </li> <li><a href="#">テスト(2)</a> </li> </ul> </div> </div> </body> </html> ◆CSS body { font-size: 13px; font-family: "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", "MS UI Gothic", "ＭＳ ゴシック", "ＭＳ 明朝"; } #MainDiv { overflow: hidden; width: 1000px; margin: 0; } /* 全角カタカナ階層 */ #gnav { float: left; width: 150px; height: 200px; } #gnav ul { margin: 0; padding: 0; border-top: 1px #FFFFFF solid; list-style-type: none; } #gnav ul li { width: 150px; height: 24px; text-align: center; background: #c8d6e8; border-bottom: 1px #FFFFFF solid; } #gnav ul li a { display: block; width: 150px; height: 24px; color: #000000; font-size: 100%; line-height: 1.6; background: #6495ed; text-decoration: none; } /* ※．子メニュー以下にマウスがあるときも親メニューの色は変わったにしたい */ #gnav ul li:hover > a { background: #ffa500; } /* 全角ひらがな階層 */ #gnav ul li ul { display: none; list-style-type: none; } #gnav ul li:hover ul { display: block; position: relative; top: -25px; left: 152px; width: 150px; height: 25px; }
- 締切済み
- HTML
お礼
できました～～！！ なかなか同じような回答がなかったので、どうやってやればいいかずっと困っていました・・・ 本当にありがとうございました。