jquery – 从当前url追加/删除锚名,无需刷新

前端之家收集整理的这篇文章主要介绍了jquery – 从当前url追加/删除锚名,无需刷新前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我希望在点击事件附加/删除名称“#on”以添加到当前url而不重新加载页面,或者使用链接中的href =’#on’,因为它使我的页面跳转

例如:http://www.example.com/page.html#on,所以我可以得到来自该网址的用户的检测
调用On()函数

function On()
{   
   //append to current url the anchor "#on"                 
}

function Off()
{   
  //remove from the current url the anchor "#on"                    
}

$('.on').live('click',function() {
  On();
  return false;    
}); 


$('.off').live('click',function() {
  Off();
  return false;    
});

解决方法

您不需要jQuery,您可以使用location.hash获取/设置锚点名称。如果将其放在jQuery ready函数中,如果设置为某个值,则可以执行一些操作:
$(function(){
    // Remove the # from the hash,as different browsers may or may not include it
    var hash = location.hash.replace('#','');

    if(hash != ''){
        // Show the hash if it's set
        alert(hash);

        // Clear the hash in the URL
        location.hash = '';
    }
});

请注意,删除哈希时,尾随的#可能会留在地址栏中。如果要响应锚点的实时更改,可以将回调绑定到hashchange事件:

$(document).bind("hashchange",function(){
    // Anchor has changed.
});

如果要在清除锚点时阻止页面跳到顶部,则可以绑定hashchange事件以跳回到先前的滚动位置。看看这个例子:http://jsfiddle.net/yVf7V/

var lastPos = 0;

$('#on').click(function(){
    location.hash = 'blah';
});

$('#off').click(function(){
    lastPos = $(window).scrollTop();
    location.hash = '';
});

$(window).bind('hashchange',function(event){
    var hash = location.hash.replace('#','');
    if(hash == '') $(window).scrollTop(lastPos);
    alert(hash);
});

猜你在找的jQuery相关文章