プロパティのチェンジ

質問

いつもこちらでお世話になっております。

下記のようなJavascriptとCSSでタブでの切り替えパネルを作ろうと思っています。

【header】
<script type="text/javascript">
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
}
}
</script>

【CSS】
#panel2 {display:none;}

【body】
<a href="#" onclick="MM_changeProp('panel1','','display','block','DIV')">AAA</a>
<a href="#" onclick="MM_changeProp('panel2','','display','block','DIV')">BBB</a>

<div id="panel1">AAAに関する内容</div>
<div id="panel2">BBBに関する内容</div>

現状では、リンク「BBB」をクリックしても切り替えにはならず、単に下に表示されるだけの状態です。
クリック時に該当displayをblockにするだけでなく、その時点で表示されているdisplayをnoneにすればいいのかな、
というあたりまでは推測できるのですが、その命令の追加方法が分かりません。

何卒アドバイスを宜しくお願い致します。

回答No.1

t_ohta · ベストアンサー

簡単なのは
<a href="#" onclick="MM_changeProp('panel1','','display','block','DIV');MM_changeProp('panel2','','display','none','DIV');">AAA</a>
<a href="#" onclick="MM_changeProp('panel2','','display','block','DIV');MM_changeProp('panel1','','display','none','DIV');">BBB</a>
とする方法。

コードを美しくするならJavaScriptに
function panel1(){
MM_changeProp('panel1','','display','block','DIV');
MM_changeProp('panel2','','display','none','DIV');
}
function panel2(){
MM_changeProp('panel2','','display','block','DIV');
MM_changeProp('panel1','','display','none','DIV');
}
を追加し、HTMLのリンク部分を
<a href="#" onclick="panel1();">AAA</a>
<a href="#" onclick="panel2();">BBB</a>
と書き換える。

お礼

返事が遅くなり済みません。
出来ました！理想的な回答でした。ありがとうございました！

回答No.2

yambejp

たとえばこんな感じでどうでしょう？

<script>
function MM_changeProp(objId,objClass) {
var n=document.getElementsByTagName('*');
for(var i=0;i<n.length;i++){
var cn=n[i].className;
var reg1=new RegExp("(^| )"+objClass+"( |$)");
var reg2=new RegExp("(^| )notview(?= |$)");
if(cn.match(reg1)){
if(n[i]==document.getElementById(objId) && cn.match(reg2)){
n[i].className=cn.replace(reg2,"");
}else if(n[i]!=document.getElementById(objId) && !cn.match(reg2)){
n[i].className +=" notview";
}
}
}
return false;
}
</script>
<style>
div.notview {display:none;}
</style>
<a href="#" onclick="return MM_changeProp('panel1','view1')">AAA</a>
<a href="#" onclick="return MM_changeProp('panel2','view1')">BBB</a>
<a href="#" onclick="return MM_changeProp('panel3','view1')">CCC</a>
<div id="panel1" class="hoge view1">AAAに関する内容</div>
<div id="panel2" class="view1 notview fuga">BBBに関する内容</div>
<div id="panel3" class="hoge view1 notview">CCCに関する内容</div>
<a href="#" onclick="return MM_changeProp('panel4','view2')">XXX</a>
<a href="#" onclick="return MM_changeProp('panel5','view2')">YYY</a>
<a href="#" onclick="return MM_changeProp('panel6','view2')">ZZZ</a>
<div id="panel4" class="view2">XXXに関する内容</div>
<div id="panel5" class="view2 notview">YYYに関する内容</div>
<div id="panel6" class="view2 notview">ZZZに関する内容</div>

お礼

なるほど、こういうやり方もあるのですね。
ありがとうございました！