人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

現在スマートフォンでwebサービスを製作しています。
初歩的な質問で申し訳ないのですが、jqueryについて質問させていただきます。

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

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

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

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

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

●質問者: aiueo
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Lhankor_Mhy
●0ポイント

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

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

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

◎質問者からの返答

ありがとうございます。

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

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


2 ● Lhankor_Mhy
●100ポイント ベストアンサー

なるほど。

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

http://jsfiddle.net/UcKzY/

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

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

◎質問者からの返答

ありがとうございます。

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

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ