0

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

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

示例：

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

site1.php#内容

site2.php#内容

site3.php#内容

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

站点1.php

站点2.php

站点3.php

我该怎么做？PHP 和 jQuery 吗？

我看了这段代码：

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

是否有可能以某种方式修改它，以便在我的情况下工作？

4

2 回答 2

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

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

编辑- 回应您的评论。

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

这是你的 jsFiddle——检查控制台，这样你就不必浪费时间进行检查了。

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

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

检查 jsFiddle 在这里。

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

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

于 2012-11-13T08:19:06.603 回答
0

好的，开始工作了！..

我替换

$('.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');
});
 });
于 2012-11-14T08:39:35.533 回答