更改url查询字符串,如果不存在,则单击链接而不重新加载页面

时间:2017-07-15 21:54:53

标签: javascript jquery html url query-string

我正在尝试使用jQuery更改url查询字符串而不重新加载页面,链接可能是这样的www.example.com/innerpage?tab=xyz&para=abc ..我想追加这些查询当点击该内页面内的链接时。因此,当复制链接并与其他人共享时,我会阅读这些查询以再次打开目标部分!

function getParameterByName(name) {
      url = window.location.href;
      name = name.replace(/[\[\]]/g, "\\$&");
      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
          results = regex.exec(url);
      if (!results) return null;
      if (!results[2]) return '';
      return decodeURIComponent(results[2].replace(/\+/g, " "));
}

$('.alink').click(function(e){
   e.preventDefault();
   var _link = $(this);
   var _target = _link.attr('href').substr('1');
 var target = $('div[id="'+_target+'"]');
  $('html, body').animate({
          scrollTop: target.offset().top
        }, 500);


    var urlq = getParameterByName('tab');
    if(urlq != null){
        location.href.replace("tab="+urlq, "tab="+_target);
    } else {
        location.href+= "?tab="+_target;
    }
    console.log(urlq);
});

在我的codepen

上查看我的代码

1 个答案:

答案 0 :(得分:0)

  var queryString = 'yourblock1';
  var pageUrl = '?' + queryString;
  window.history.pushState('', '', pageUrl);

但是重新加载后你应该检查参数并使用js滚动到阻止。