javascript初心者です。

下記の要件で、実装のコードを教えて下さい。

【要件】
①4つのボタンがあり、どれか一つを選択可能。選択すると選択された画像になる
(http://agtsmartphonedesign.com/300/ こちらのページの上の方にある
「TOP」「コレクション」「ランキング」。。。のようなボタンです)
②選択されたボタンは<select name="hoge">内で各々の値を持つ。
③iphoneでの実装を想定
④html javascriptで実装

説明が明確ではなく申し訳ないのですが、質問の意図、ご理解頂ける方いましたら
ご回答宜しくお願いします。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/08/08 14:30:26
  • 終了:2011/08/11 11:54:17

ベストアンサー

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2302011/08/09 10:35:09

ポイント100pt

select要素を諦めて、input要素で対応していただけるならjavascriptナシでCSSだけでできます。

 

サンプルを書きました。CSS3を使っていますのでIEはキビシメです。FirefoxとChromeで確認してます。

http://jsfiddle.net/muUhU/

 

 

 

と思ったら、iPhone Safariってlabel要素対応してないんですねえ……

iPadなどのmobile safariでは、labelタグのfor属性で指定したチェックボックスにチェックできない - Fight the Future じゅくのblog

コードをそのままパクったサンプルがこれです。jQuery使用。

http://jsfiddle.net/muUhU/2/

 

これなら初めからselect要素を使った方がいいですね。適当に書き換えれば簡単に動くはずですので試してみて下さい。

 

 

 

 

 

追記:

ちょっと時間ができたのでselectのサンプルも作ってみました。

http://jsfiddle.net/muUhU/3/

id:nnrysk

ありがとうございます!

できました!

よかったー!!

2011/08/11 11:54:45
  • id:SHARUL
    (2)の意味がよくわからないので補足をお願いできますか?
  • id:Cherenkov
    画像とボタンとselectが繋がらないので
    何をしたいのか、どう実装したいのか
    補足をお願いします。
  • id:nnrysk
    意図伝わりにくい文章ですいません。汗
    ②については
    <select name="hoge">
    <option value="A"><img src="a">
    <option value="B"><img src="b">
    <option value="C"><img src="c">
    <option value="D"><img src="d">
    </select>
    このような形式を想定しています。
    補足になっていますでしょうか。

    宜しくお願い致します

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

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

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

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