このプログラムをラジオボタンで画面が切り替わる方法ではなく、普通のsubmitボタンで切り替えれる方法にしたいです。
最初は、<input type="radio"をinput type="submit"にしたのですが、これでは、たぶん変わってるんだとは思うんですけど一瞬しか画面が変わりません。
これを、次のボタンを押すまで、ずーと同じ画面になる方法が知りたいです。
<html>
<head>
<style type="text/css">
#contents2,#contents3,#contents4{
display:none;
}
</style>
<script language=javascript>
function view(divId,divClass){
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
if(divs[i].className==divClass){
if(divs[i].id==divId) divs[i].style.display="block";
else divs[i].style.display="none";
}
}
}
</script>
</head>
<body>
<form>
<input type="radio" name="category" id="category1" onClick="view('contents1','contensGroup')" checked><label for="category1">エリア1</label>
<input type="radio" name="category" id="category2" onClick="view('contents2','contensGroup')"><label for="category2">エリア2</label>
<input type="radio" name="category" id="category3" onClick="view('contents3','contensGroup')"><label for="category3">エリア3</label>
<input type="radio" name="category" id="category4" onClick="view('contents4','contensGroup')"><label for="category4">エリア4</label>
</form>
<div id="contents1" class="contensGroup">内容1</div>
<div id="contents2" class="contensGroup">内容2</div>
<div id="contents3" class="contensGroup">内容3</div>
<div id="contents4" class="contensGroup">内容4</div>
</body>
</html>
No.2ベストアンサー
- 回答日時:
#1さんの言う通り、一瞬しか変わらない原因はリロードされてしまうことですね。
なので、
<input type="submit" …
とするのではなく
<input type="button" …
とすればOKでしょう。
submitは送信なので、結果的にリロードされるのは当然。
buttonはデフォルトでは何もしないので、こういう場面で使えます。
return false; して、クリックをキャンセルして送信を防ぎ(結果的にリロードも防ぐ)方法もないではありませんが、buttonというタイプがあるのにわざわざsubmitを使ってわざわざ後からキャンセルするのは美しくはない。
今後、<input>ではなく、たとえば<a>リンクを使って切り替えたいという場面があるかも知れないので、return false;でキャンセルできるということを覚えておくのはいいかな。
onClick="view('contents1','contensGroup');return false;"
No.1
- 回答日時:
submitボタンだとリロードされちゃいますけど、、、
結局タブメニューを作りたいということだと思うので、下記を参考になさってください。
http://shanabrian.com/web/javascript/tab01.php
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- その他(プログラミング・Web制作) seleniumbasic chrome操作について 1 2023/03/29 15:40
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
前回の質問の続き
-
MAX関数を使ってからLEFT JOIN...
-
iframe内のリンクが飛ばないの...
-
表示・非表示のスクリプトで、...
-
getElementByIdの戻り値がnull...
-
console.log結果をhtmlで表示し...
-
javascriptテキストBOX色を元に...
-
[JavaScript]IE11にてフリック...
-
クリックする度に表示/非表示が...
-
ボタンを押せば、画面が切り替...
-
JSで動的にリンクを作成
-
jQueryで特定id以外の下にある...
-
javascriptにフェードインを追...
-
javascriptでオブジェクトの重...
-
jspでcssが読み込めない
-
1枚の画像をクリックすると複数...
-
フッター上部に謎の隙間
-
MFCで画像を表示させているので...
-
appendChildでのデフォルト値
-
【javascript】ロールオーバー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
iframe内のリンクが飛ばないの...
-
変数内容をHTML内で表示する方法
-
getElementByIdの戻り値がnull...
-
背景色を透明化
-
自働生成される<div>タグに連番...
-
複数のリンク画像を一定時間で...
-
クリックで色変更後に既に変更...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
Jquery 親要素で順番入れ替え
-
HTML id名とjavascript変数名
-
VBScriptでXMLのデータを取得す...
-
[急ぎ] videoタグで埋め込んだm...
おすすめ情報