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

A 回答 (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;"
    • good
    • 0

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



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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

今、見られている記事はコレ!

おしトピ編集部からのゆる~い質問を出題中

お題をもっとみる

このQ&Aを見た人が検索しているワード


このカテゴリの人気Q&Aランキング

おすすめ情報

カテゴリ