Question

所以我已经构建了我的第一个响应式网站，但是移动设备上的菜单存在问题。这一切都有效，因此当您使用移动设备时，您可以从下拉列表中选择一个选项（下面的HTML），它会将您带到正确的页面。但是，当页面加载时，它默认返回“Home”，这是列表中的第一个选项。

这意味着当您在另一页上时，您无法选择回家。但我需要的是当选择该选项并为所选的一个加载新页面然后成为默认选项。因此，您可以使用下拉菜单返回主页。

我之前没有这样做，所以希望它相当简单！

HTML：

 <form id="mobile_nav">
            <select id="mobile_menu">

<option value="/">Home</option>           
<option value="/page 1/">page 1</option>
<option value="/page 2/">page 2</option>
<option value="/page 3/"page 3</option>
<option value="/page 4/"page 4</option>
<option value="/page 5/"page 5</option>

            </select>
 </form>

JS：

 jQuery(document).ready(function() {
        nav();

          jQuery("#mobile_menu").val(location.pathname);

        jQuery("#mobile_menu").change(function() {
            document.location = jQuery(this).val();
        });

JS启用了移动设备的下拉列表。

如果您需要更多信息和感谢，请告诉我。

Answer 1

这可能会有所帮助：

jQuery(document).ready(function(){
    jQuery("#mobile_menu").val(location.pathname)
});

这将尝试将#mobile_menu的值设置为与位置的路径部分（当前URL）相同。

Answer 2

您可以使用document.URL了解当前网址。将此URL与下拉列表中的值进行比较，您可以在页面加载时选择相应的选项。例如。您可以使用类似于此的方法：

var currentURL = document.URL;
if (currentURL.indexOf("home"))
{
   $("#mobile_nav select").val("home");
}

Answer 3

使用window.location.href获取当前位置并选择

 jQuery(document).ready(function(){
    jQuery("#mobile_menu").val(window.location.href);
 });

Answer 4

我对该领域的了解已经过时，但这可能带来一些想法（我希望）。

<head>
  <script>
    function makeDefault(elm) {
        elm.options[elm.selectedIndex].selected = 'selected';
        alert(elm.innerHTML);
    }
  </script>
</head>
<body>
  <form id="mobile_nav">
    <select id="mobile_menu" onchange="makeDefault(this)">
      <option value="/">Home</option>           
      <option value="/page 1/">page 1</option>
      <option value="/page 2/" selected='selected'>page 2</option>
    </select>
  </form>
</body>

在页面更改后选择下拉列表中选择的选项

4 个答案: