[解決済み] <option> タグの中で href リンクを使用する
質問
以下のようなHTMLコードを持っています。
<select name="forma">
<option value="Home">Home</option>
<option value="Contact">Contact</option>
<option value="Sitemap">Sitemap</option>
</select>
を作るにはどうしたらいいのでしょうか? ホーム , お問い合わせ先 と サイトマップ の値をリンクにするのですか? 以下のコードを使ってみたのですが、案の定うまくいきませんでした。
<select name="forma">
<option value="Home"><a href="home.php">Home</a></option>
<option value="Contact"><a href="contact.php">Contact</a></option>
<option value="Sitemap"><a href="sitemap.php">Sitemap</a></option>
</select>
どのように解決するのですか?
<select name="forma" onchange="location = this.value;">
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>
UPDATE(2015年11月)。 今の時代、ドロップメニューが欲しいなら、間違いなくたくさんある より良い方法で実装することができます。 この回答は直接的な質問に対する回答ですが、私は一般向けのWebサイトではこの方法を提唱していません。
UPDATE(2020年5月)。
コメントで、なぜ私がこの解決策を提唱しないのかと質問された方がいます。それは、セマンティックスの問題だと思います。私は、ユーザーが
<a>
とし
<select>
というのも、HTML要素には意味的な出会いがあり、目的があるからです。
anchors
を移動させる。
<select>
は、リストから何かを選び出すためのものです。
もしあなたが非伝統的なブラウザ(非グラフィカルブラウザやスクリーンリーダー、プログラムによるページへのアクセス、JavaScriptの無効化)でページを見ているとしたら、次のような意味や意図があるでしょうか。
<select>
ナビゲーションに使用したのは?これは、「ページ名を選んでください」と言っているのであって、それ以外のこと、つまりナビゲーションに関することは何も言っていません。これに対する簡単な回答は
well i know that my users will be using IE or whatever so shrug
しかし、これでは、意味的な重要性を見失ってしまいます。
一方、適切なレイアウト要素(といくつかのjs)で構成されたファンキーなドロップダウンUI要素には、通常のアンカーがいくつか含まれており、レイアウト要素が失われたとしても、その意図は維持されます:「これらはたくさんのリンクです、1つを選択すればそこに移動します"。
に関する記事を紹介します。
の誤用と濫用は
<select>
.
関連
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] JavaScriptでドロップダウンリストの選択値を取得する
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] jQuery get specific option tag text
-
[解決済み] セレクトボックスのオプションをすべて削除してから、オプションを1つ追加して、jQueryで選択するにはどうすればよいですか?
-
[解決済み] 選択オプション「selected」を値で設定する
-
[解決済み] HTMLのチェックボックスのchecked属性の適切な値は何ですか?
-
[解決済み】JavaScriptを使用して、HTMLの選択されたオプションを変更するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
iframeフレームワークの使用
-
[解決済み] BootstrapのCollapse Navbarが動作しない
-
[解決済み] HTML IFステートメント
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] <meta charset="utf-8"> vs <meta http-equiv="Content-Type">.
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] テーブル内のテキストアラインクラス
-
[解決済み] HTMLのレイアウトにテーブルを使用しない理由は?[クローズド]