いつもこちらでお世話になっております。
下記のような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ベストアンサー
- 回答日時:
簡単なのは
<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
- 回答日時:
たとえばこんな感じでどうでしょう?
<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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
クリックすると下に説明文が出...
-
フラッシュの様に
-
JavaScriptにて『var val2 = "d...
-
Dragdealer JSの二つ以上の設置
-
IFRAMEの表示/非表示を切り替え...
-
iframe内のリンクが飛ばないの...
-
ダブルクォーテーションが消え...
-
style.visibility="hidden";
-
タブで開いてさらにタブ内をア...
-
createElementで作成した要素を...
-
動的にHTMLコンテンツを吹き出...
-
console.log結果をhtmlで表示し...
-
javascriptテキストBOX色を元に...
-
removeAttribute()メソッドで削...
-
iframe内からjQueryで指定したい
-
【jQuery】2分割レイアウトで、...
-
jQueryで電卓を作っているのですが
-
javascriptを使って画像を切り...
-
jQueryスライドショー画像への...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き function mov...
-
前回の質問の続き function mou...
-
読み込んだQRコードをフォーム...
-
javascriptテキストBOX色を元に...
-
背景色を透明化
-
iframe内のリンクが飛ばないの...
-
createElementで作成した要素を...
-
IFRAMEの表示/非表示を切り替え...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
removeAttribute()メソッドで削...
-
console.log結果をhtmlで表示し...
-
javascriptでオブジェクトの重...
-
タブで開いてさらにタブ内をア...
-
jQueryで特定id以外の下にある...
-
指定したパスが現URLに含まれて...
-
折りたたみ部分にアンカーでリ...
-
前回の質問の続き
-
jQueryのアコーディオンメニュ...
おすすめ情報