php - 根据移动或桌面 css 更改导航 url

Question

当我的网站使用移动 CSS 时，导航变得很长，以至于用户除非向下滚动才能看到内容。

然后我想更改导航 urs 以链接到 div，以便它直接跳转到内容

示例:

当@media only screen and (min-width: 480px) is in use the navigations links have the url

site1.php#content

site2.php#content

site3.php#content

当使用@media only screen and (min-width: 992px) 时

site1.php

网站2.php

site3.php

我应该怎么做？ PHP 还是 jQuery？

我看了这段代码:

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

是否有可能以某种方式修改它以使其适用于我的情况？

Answer 1

如果您正在设置您希望页面滚动到的元素的名称，我们可以做到。

$(function(){
    var hash = (window.location.hash) ? window.location.hash : null;
    if(null !== hash){
        //now I don't know how the markup is designed, so we'll just use `id`
        $(window).scrollTop($('[id='+hash+']').scrollTop());
    }
});

在页面加载时，我们创建一个名为 hash 的变量, 我们看看 hash存在，如果存在，我们使用散列值，否则，我们将其清空。在我们的条件中，我们告诉窗口滚动，直到窗口到达我们定义为值的元素的终点，在我们的示例中，它是 id。元素 matching the hash value .

现在，我不知道你是如何生成变量 content 的, 你的 <a> 中一定有一些属性包含所需值的元素。如果您向我展示您打算如何引用该元素，我将连接缺失的链接。

编辑 -- 回应您的评论。

$('.main-menu a').prop('href', function(a,b){
    return b+'#content';
});

Here's your jsFiddle -- 检查控制台，这样您就不必浪费时间进行检查。

编辑 #2 -- 响应移动检测。

我没有使用媒体查询，而是使用用户代理嗅探。这是一种很常见的技术。伙计们在http://detectmobilebrowsers.com/提供一个脚本，我们可以使用它来检查用户代理是否存在许多已知和流行的移动设备。

Check the jsFiddle out over here .

只需将大块代码放在像“mobileDetect.js”这样的文件中。

//comments 下方的任何内容是我上面编写的代码的实现，并相应地放置在条件语句中。我在几台设备上对此进行了测试，效果很好。