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

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

  • カウントダウンしたいことある?

    大晦日は、2011年最後の1日です。天皇陛下が「心の重い年」と表現されたように、3月11日の未曽有の大惨事は本当に大変な出来事でした。今年の漢字として選ばれた「絆」が我々にとって大切なものであると強く感じさせ...

  • たまランチ:第47話「さつまいも」

    外ランチを愛してやまない元気な女子社員・たまちゃん(26)。オシャレなお店より「安くておいしい」お店が大好き! そんな女子力低めなたまちゃんの、色気より食い気な日々をつづります。

  • エルフ田さん:第71話「貯められる人」

    エルフ(ファンタジーとかに出てくる長寿の種族)の「エルフ田」と、ただの人間である女子社員2人による日常ギャグ。エルフならではのズレたツッコミでバシバシ人間界の話題を斬っていきます。

  • 感情的にならない人の気質

    あなたの身の回りで感情表現が薄い人はいないだろうか? 感情表現が薄いといい意味でクールに感じ、大人な印象を持つ人も多いだろう。だが、一方で何を考えているか分からず、とっつきづらい印象を抱くこともあるの...

  • デニーズで6月7日より「ビーフフェア」が開催

    デニーズで2016年6月7日から7月11日(予定)まで、「ビーフフェア」が開催される。気温も上昇し、スタミナを身体に取り入れたいこの時期におすすめなビーフメニュー4品が提供される。 登場する4品は、しっとりとし...

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

お題をもっとみる

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


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

おすすめ情報

カテゴリ