web-dev-qa-db-ja.com

更新せずに現在のURLからアンカー名を追加/削除

クリックイベントでアンカーページ「#on」を追加/削除して、ページをリロードせずに現在のURLに追加するか、リンクからhref = '＃on'を使用してページをジャンプさせたい

例： http://www.example.com/page.html#on そのURLから来たユーザーを検出し、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;    
});
jqueryurlappendanchor
32
Adrian

本当に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);
});
60
DarthJDG

jqueryを使用している場合、このコードを試してください

$("a[href^=#]").on("click", function(e) {
    e.preventDefault();
    history.pushState({}, "", this.href);
});
16
Alex Doumas