超链接点击重定向到主页并滑动div

时间:2012-08-21 21:24:00

标签: jquery hyperlink navigation

要么我错过了某些东西,要么用错误的条款进行搜索,但我自己无法解决这个问题。如标题中所述,单击navLink应该返回到主页,但也可以滑动切换幻灯片2并为网站设置动画。以下代码重新加载回家,但是在此上下文中回调被覆盖或完全错误,因为切换和动画代码在其他上下文中有效。

非常感谢帮助

function goHome(callback) { 
window.location = $("#navLink").find("a").attr("href");
callback() 
} 

function changeHome(){
$("#slide-2 h2").next(".portNav").slideToggle(800);
$("html, body").animate({scrollTop:$(this).offset().top}, 'medium');
}

$("#navLink").click(function(event){
event.preventDefault();
goHome(changeHome)
});

2 个答案:

答案 0 :(得分:4)

您正在更改文档位置,加载新页面,并且将再次加载javascript,并且当您离开页面时,您的回调将永远不会被执行。

答案 1 :(得分:1)

您在这里有2个选项,以实现您的需求

1- QueryString

您可以使用查询字符串来确定此加载是来自您的链接还是来自正常链接 像这样的东西:

$(function(){
 $('#redirect').click(function(){
   window.location = 'YOUR_HOME_DOCUMENT?lnk=1';
 });
});

然后在你的主页ready()函数中,检查是否存在这个查询字符串,如果提供的话,然后动画你想要的任何内容。

示例:

1-首先,为了轻松读取Querystring变量,我总是使用以下jQuery插件。 (我不记得从哪里获得这段代码,但很多感谢原版海报)。

$.extend({
    getUrlVars: function () {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    },
    getUrlVar: function (name) {
        if ($.getUrlVars()[name] == null) {
            return "";
        }
        else {
            return $.getUrlVars()[name];
        }
    }
});

然后,我可以这样做:

$(function (){ // a short hand for $(document).ready(function)  ;)

var comingFromMyLink = $.getUrlVar('lnk');

if(comingFromMyLink)
{
     // do the required animation here
}

});

2- Cookie

我真的不建议这个场景使用此选项,但说实话,我想尽可能为您提供更多信息,您可以选择任何您认为合适的选项。

您可以在Cookie中保留标记或变量,并尝试将其放入主页

结帐此示例:http://jquery-howto.blogspot.com/2010/09/jquery-cookies-getsetdelete-plugin.html

或此插件:http://archive.plugins.jquery.com/project/Cookie

就是这样,如果您仍然需要这方面的帮助,请告诉我,希望您觉得我的答案对您有用:)