ボタンを押せば、画面が切り替わる方法が知りたい
このプログラムをラジオボタンで画面が切り替わる方法ではなく、普通の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>
