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

时间:2012-11-13 08:09:25

标签: php jquery css url linker

当我的网站使用移动广告时导航很长,除非他们向下滚动,否则用户不会看到内容。

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

exsampel:

当@media only屏幕和(min-width:480px)正在使用时,导航链接有网址

site1.php#含量

site2.php#含量

site3.php#含量

当@media only屏幕和(min-width:992px)正在使用时

site1.php

site2.php

site3.php

我该怎么做? PHP og jQuery?

我看看这段代码:

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

是否有可能以某种方式对其进行修改,以便我能够使用它?

2 个答案:

答案 0 :(得分: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,对于我们的示例,它是元素id的{​​{1}}。

现在,我不知道你如何生成变量matching the hash value,你的content元素中必须有一些包含你想要的值的属性。如果您告诉我您计划如何引用该元素,我将连接缺少的链接。

修改 - 回复您的评论。

<a>

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

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

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

Check the jsFiddle out over here

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

$('.main-menu a').prop('href', function(a,b){ return b+'#content'; }); 以下的任何内容都是我上面编写的代码的实现,并相应地放在条件语句中。我在一些设备上对此进行了测试,效果很好。

答案 1 :(得分: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');
});
 });