このプログラムをラジオボタンで画面が切り替わる方法ではなく、普通のsubmitボタンで切り替えれる方法にしたいです。最初は、 #contents2,#contents3,#contents4{ display:none; } function view(divId,divClass){ var divs=document.getElementsByTagName('div'); for(var i=0;i エリア１エリア２エリア３エリア４内容１内容２内容３内容４

ボタンを押せば、画面が切り替わる方法が知りたい

解決済

質問者：nomnom20
質問日時：2014/09/10 19:42
回答数：2件

このプログラムをラジオボタンで画面が切り替わる方法ではなく、普通の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">エリア１</label>
<input type="radio" name="category" id="category2" onClick="view('contents2','contensGroup')"><label for="category2">エリア２</label>
<input type="radio" name="category" id="category3" onClick="view('contents3','contensGroup')"><label for="category3">エリア３</label>
<input type="radio" name="category" id="category4" onClick="view('contents4','contensGroup')"><label for="category4">エリア４</label>
</form>
<div id="contents1" class="contensGroup">内容１</div>
<div id="contents2" class="contensGroup">内容２</div>
<div id="contents3" class="contensGroup">内容３</div>
<div id="contents4" class="contensGroup">内容４</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： ONEONE
回答日時：2014/09/11 00:42

submitボタンだとリロードされちゃいますけど、、、

結局タブメニューを作りたいということだと思うので、下記を参考になさってください。
http://shanabrian.com/web/javascript/tab01.php

- 0
- 件

通報する

No.2ベストアンサー

回答者： coai
回答日時：2014/09/11 10:05

#1さんの言う通り、一瞬しか変わらない原因はリロードされてしまうことですね。

なので、

<input type="submit" …

とするのではなく

<input type="button" …

とすればOKでしょう。

submitは送信なので、結果的にリロードされるのは当然。
buttonはデフォルトでは何もしないので、こういう場面で使えます。

return false; して、クリックをキャンセルして送信を防ぎ(結果的にリロードも防ぐ)方法もないではありませんが、buttonというタイプがあるのにわざわざsubmitを使ってわざわざ後からキャンセルするのは美しくはない。
今後、<input>ではなく、たとえば<a>リンクを使って切り替えたいという場面があるかも知れないので、return false;でキャンセルできるということを覚えておくのはいいかな。

onClick="view('contents1','contensGroup');return false;"