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

Question

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

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

示例：

当@media only screen and (min-width: 480px) 正在使用时，导航链接有 url

site1.php#content

site2.php#content

site3.php#content

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

site1.php

site2.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 是否存在，如果存在，我们使用哈希值，否则，我们将其设为空。在我们的条件中，我们告诉窗口滚动直到窗口到达我们定义为值的元素的位置，在我们的示例中，它是元素matching the hash value 的id。

现在，我不知道您如何生成变量content，您的<a> 元素中必须有一些属性包含您想要的值。如果您告诉我您打算如何引用该元素，我将连接缺少的链接。

编辑 -- 回应您的评论。

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

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

Edit #2 -- 响应移动检测。

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

Check the jsFiddle out over here.

只需将大块代码放入类似“mobileDetect.js”的文件中即可。

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

Answer 2

好的，开始工作了！..

我替换

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

到这里：

$(function () {

     $('.main-menu a').each(function () {
    var href = $(this).attr('href');
    $(this).attr('href', href + '#content');
});
 });