いつもこちらでお世話になっております。
下記のような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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
読み込んだQRコードをフォーム...
-
表示・非表示のスクリプトで、...
-
マウスを乗せるとメニュー表示
-
バッチファイルでカウントアッ...
-
removeAttribute()メソッドで削...
-
タブで開いてさらにタブ内をア...
-
console.log結果をhtmlで表示し...
-
折りたたみ部分にアンカーでリ...
-
createElementで作成した要素を...
-
多次元配列を連想配列へ変換したい
-
HTMLタグに複数のクラスを設定...
-
取得した要素がインライン要素...
-
javascriptでスタイルを動的に...
-
getElementByIdの戻り値がnull...
-
document.getElementById( ).st...
-
CSSで指定したwidthをマウスで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
タブで開いてさらにタブ内をア...
-
変数名をどのようにつけるのが...
-
クリックで色変更後に既に変更...
-
表示・非表示のスクリプトで、...
-
HTMLとJavaScriptで作ったタイ...
-
console.log結果をhtmlで表示し...
-
jQueryでクリックされた要素のi...
-
HTMLタグに複数のクラスを設定...
-
指定したパスが現URLに含まれて...
-
iframe内のリンクが飛ばないの...
-
背景色を透明化
-
テキストエリア内の一部の文字...
-
変数内容をHTML内で表示する方法
-
classの中の<a>タグにidを追加
おすすめ情報