div、onClick のブロック/非表示を切り替えるスクリプトがあります。onClick は、関連する「サムネイル」画像をアクティブから非アクティブに切り替えます。
Firefox でのみ、div が互いに重なり合っています。onClick が display:none スタイルを現在のアイテムに関連付けていないようです。
すべての div に ID が関連付けられていることを確認しました。これは、Firefox での getElementById の問題に関連する上位の質問と思われます。
これのトラブルシューティングについての考えは役に立ちます、ありがとう!
これが私のJavaScriptです:
var curVid = "VideoA";
var curImg = "VideoA_thumbnail";
function changeVideo(id, img)
{
if(document.getElementById(id) != null && curVid != id)
{
document.getElementById(curVid).style.display = "none";
document.getElementById(id).style.display = "block";
document.getElementById(id + "_thumb").src = "..//Thumbnails//" + img + "_selected.jpg";
document.getElementById(id + "_thumb").style.cursor = "default";
document.getElementById(curVid + "_thumb").src = "..//Thumbnails//" + curImg + ".jpg";
document.getElementById(curVid + "_thumb").style.cursor = "pointer";
if(VideoJS.browserSupportsVideo())
{
document.getElementById(curVid + "_video").pause();
document.getElementById(curVid + "_video").currentTime = 0;
VideoJS.setup(id + "_video");
document.getElementById(id + "_video").play();
}
else
{
$f(curVid + "_flash").stop();
$f(id + "_flash").play();
}
curVid = id;
curImg = img;
}
}
これがHTMLです
<div id = "VideoA" style = "display:block;">content here</div>
<div id = "VideoB" style = "display:none;">content here</div>
<div id = "VideoC" style = "display:none;">content here</div>
<div id = "VideoD" style = "display:none;">content here</div>
<div id = "VideoE" style = "display:none;">content here</div>
<div>
<img src = "a.jpg" id = "VideoA_thumb" onclick = "changeVideo('VideoA', 'VideoA_thumb')" />
<img src = "b.jpg" id = "VideoB_thumb" onclick = "changeVideo('VideoB', 'VideoB_thumb')" />
<img src = "c.jpg" id = "VideoC_thumb" onclick = "changeVideo('VideoC', 'VideoC_thumb')" />
<img src = "d.jpg" id = "VideoD_thumb" onclick = "changeVideo('VideoD', 'VideoD_thumb')" />
<img src = "e.jpg" id = "VideoE_thumb" onclick = "changeVideo('VideoE', 'VideoE_thumb')" />
</div>