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 添加到（每个）选择元素。当它改变时，函数运行。该函数从新选择的选项（在本例中为 url）中获取值，并将该 url 设置为窗口的新位置。

于 2012-09-14T18:28:27.487 回答
3

您可以将页面的 URL 作为选项的值属性。在下面的示例中，我使用了指向常见网站的 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 来实现。首先，通过 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 bootsrap 或模拟它是如何工作的。

于 2012-09-14T18:28:35.537 回答