現在スマートフォンでwebサービスを製作しています。

初歩的な質問で申し訳ないのですが、jqueryについて質問させていただきます。

1html内に、コンテンツ1(検索)、コンテンツ2(動画)、コンテンツ3(日記)、のようにコンテンツを全ていれておいて、各ボタンを押すと1つだけ表示されるようにしようと考えています。
※スマートフォン版のツイッターのヘッダーにあるアイコンを押すと切り替わる仕組みと同じです。

//検索ボタンを押すと検索ページが表示されて、それ以外のコンテンツが非表示になる。
$("#kensaku_btn").click(function(){
$("#kensaku_page").show();
$("#douga_page").hide();
$("#nikki_page").hide();
});

バラしていくと上記のようにボタン1つ1つに作れば動くのですが、コードを簡素にできないか悩んでいます。

ボタンを押すと、ボタンに付随したページのみが表示され、それ以外は非表示になる。

プログラミングを始めて1ヶ月半程度の知識しかないもので、簡素にまとめれそうなのですがどなたか教えていただけますと助かります。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/09/14 15:53:48
  • 終了:2011/09/14 18:21:04

ベストアンサー

id:Lhankor_Mhy No.2

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/09/14 16:55:27

ポイント100pt

なるほど。

 

では、こういうのはどうでしょう。

http://jsfiddle.net/UcKzY/

 

ちょっと危ういですが、こういうのも。

http://jsfiddle.net/UcKzY/1/

id:kuso47

ありがとうございます。

こちらをもとになんとか解決することができました。

2011/09/14 18:22:40

その他の回答(1件)

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/09/14 16:20:47

ページの要素にクラスをつけるなどして、

$("#kensaku_btn").click(function(){
  $(".pages:visible").hide();
  $("#kensaku_page").show();
});

というコードではいかがでしょうか?

id:kuso47

ありがとうございます。

上記ですと検索ページの時のみ有効な指定かと思うのですが、

動画、日記、など複数ボタンにも適用したい場合はどうしたらよいでしょうか?

2011/09/14 16:24:37
id:Lhankor_Mhy No.2

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/09/14 16:55:27ここでベストアンサー

ポイント100pt

なるほど。

 

では、こういうのはどうでしょう。

http://jsfiddle.net/UcKzY/

 

ちょっと危ういですが、こういうのも。

http://jsfiddle.net/UcKzY/1/

id:kuso47

ありがとうございます。

こちらをもとになんとか解決することができました。

2011/09/14 18:22:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません