2

320px ビューポート (iPhone など) のナビゲーション メニューとして以下を使用しています。

  <select>
     <option value="#">Home</option>
     <option value="#">About</option>
     <option value="#">Products and Services</option>
     <option value="#">Markets</option>
     <option value="#">Case Studies</option>
     <option value="#">Markets</option>
     <option value="#">Partners</option>
     <option value="#">Contact Us</option>
     <option value="#">Careers</option>
     <option value="#">News</option>
  </select>

値を対応するページへのリンクとして設定したい。これを設定するにはどうすればよいですか。値として URL を入力しましたが、機能しません。私はこれに正しく近づいていますか？

4

3 に答える 3

4

jQuery を使用する場合は、次のようなことができます。

$('select').change(function(){
    var url = $(this).val();
    window.location = url;
});

change-event を (すべての) select 要素に追加します。それが変更されると、関数が実行されます。この関数は、新しく選択されたオプション (この場合は URL) から値を取得し、その URL をウィンドウの新しい場所として設定します。

于 2012-09-14T18:28:27.487 に答える
3

オプションの値属性として、ページへの URL を配置できます。以下の例では、一般的な Web サイトへの URL を使用しましたが、サイト内のページへの URL を使用できます。

<select id="nav">
     <option value="http://www.google.com">Google</option>
     <option value="http://www.ebay.com">eBay</option>
     <option value="http://www.amazon.com">Amazon</option>
</select>

ユーザーがドロップダウンの値を変更したときに選択した URL に移動したい場合は、JavaScript を使用してそれを行うことができます。まず、 select 要素をその IDで取得します。次に、値が変更されたときに実行される関数であるイベント リスナーを追加します。その関数で、ユーザーのブラウザがその URL に移動するように設定します。

document.getElementById("nav").addEventListener('change', function () {
    window.location = this.value;
}, false);​

このjsFiddleで私の例を実際に見ることができます。

于 2012-09-14T18:32:13.343 に答える
0

によってエミュレートされた小さなディスプレイselectのナビゲーション メニュー<ul><li>については、twitter のブートストラップまたはアナログの仕組みを参照してください。

于 2012-09-14T18:28:35.537 に答える