firefoxだけ、javascriptが思うように動作しません。

質問

firefoxだけ、javascriptが思うように動作しません。

下記、html記述です。
<a href="javascript:void(0);" onclick="show1()">tab1</a>
<a href="javascript:void(0);" onclick="show2()">tab2</a>
<a href="javascript:void(0);" onclick="show3()">tab3</a>
<div id="page1">page1</div>
<div id="page2">page2</div>
<div id="page3">page3</div>

下記、javascript記述です。
function show1(){
page1.style.display="block";
page2.style.display="none";
page3.style.display="none";
}

function show2(){
page1.style.display="none";
page2.style.display="block";
page3.style.display="none";
}

function show3(){
page1.style.display="none";
page2.style.display="none";
page3.style.display="block";
}

tab1をクリックすると、page1のみ表示
tab2をクリックすると、page2のみ…
という風に動作させたいです。

IE、opera、chromeでは動作しますが、
firefoxだけ全く動作しません。
どのように修正すれば動くようになるでしょうか？

javascriptについては初心者なので、
基本的なところから間違っているのかもしれませんが、
ご回答よろしくお願いします。

回答No.1

yyr446 · ベストアンサー

idふって制御するなら
function show1(){
document.querySelector("#page1").style.display="block";
document.querySelector("#page2").style.display="none";
document.querySelector("#page3").style.display="none";
}

function show2(){
document.querySelector("#page1").style.display="none";
document.querySelector("#page2").style.display="block";
document.querySelector("#page3").style.display="none";
}

function show3(){
document.querySelector("#page1").style.display="none";
document.querySelector("#page2").style.display="none";
document.querySelector("#page3").style.display="block";
}

で、Firefoxでもopera、chrome、IE　でOKです。
古いIEやoperaを無視しないなら、昔ながらの

　document.getElementById("page1").style.display="none";

とする。

お礼

早速のご回答ありがとうございます。
きちんと動作するようになりましたm(_ _)m