dポイントプレゼントキャンペーン実施中！

クリックしたリンクの色を保持して、<object>にそのリンクを表示させる

解決済

  • 質問者：burazer
  • 質問日時：
  • 回答数：2件

下記のプログラムは、クリックしたリンクの色を保持して、<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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： _pipi_
  • 回答日時：

<html>


<head>
<style type="text/css">
.object{ width: 400px; height:400px; border:1px solid #000; }
#menu a { color:#00f; text-decoration:none; }
#menu .hoge { color:#f00; background-Color:#ff0; font-weight:bold; }
</style>

<script type="text/javascript">
function addEvent(e,n,evt,uc){e./*@cc_on @if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/n,evt,uc)}

var memory;
function changeObj(tgt,url){
if(memory) memory.className='';
document.getElementById('objarea').innerHTML = '<object data="' + url + '" type="text/html"></object>'+url;
tgt.className='hoge';
memory = tgt;
return 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="return changeObj(this,'http://yahoo.co.jp')">test1</a></li>
<li><a href="#" onclick="return changeObj(this,'http://www.google.co.jp/')">test2</a></li>
</ul>
</body>
</html>


window.addEventListener('onclick', changeObj, false);
に on ?
    • good
    • 0
    • 件
通報する
この回答へのお礼

出来ました！
ありがとうございました。

通報する
お礼日時：2008/11/03 18:14

No.1

  • 回答者： _pipi_
  • 回答日時：

オンクリックのイベントがダブりすぎ

    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報