如何防止在单击超链接后重新加载页面，但将其重定向到该页面并编写出必要的代码？

Question

我的问题听起来可能令人困惑，但实际上并非如此。让我把事情告诉你。情况是，我遵循HTML代码：

/*This is the hyperlink I've given for example here. Many such hyperlinks may present on a webpage representing different question ids' */
<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21679" title="Fixed" href="#fixedPopContent" class="fixed" data-q_id="21679" id="fix_21679">Fixed</a>

/*Following is the HTML code for jQuery Colorbox pop-up. This code has kept hidden initially.*/
<div class="hidden">
  <div id="fixedPopContent" class="c-popup">
    <h2 class="c-popup-header">Question Issue Fix</h2>
    <div class="c-content">         
      <h3>Is question reported issue fixed?</h3>
      <a href="#"class="c-btn" id="fixedPop_url">Yes</a>
      <a href="#"class="c-btn">No</a> 
    </div>
  </div>
</div>

现在，单击这个超链接，我将显示一个弹出(我在这里使用了jQUery颜色盒弹出。即使你不熟悉这个图书馆，也没关系。)在这个弹出窗口中有两个按钮：是和No.实际上，这些不是按钮，这些是超链接，但显示为一个按钮使用CSS。现在我的问题是，当用户单击超链接'Yes'时，页面将重定向到href属性值并重新加载页面。

实际上，我想进入href属性中提到的页面，但是页面不应该重新加载或刷新。如何做到这一点？下面是彩色框弹出的jQuery代码，以及、是和没有按钮的代码，出现在这个弹出窗口上。我已经试过这么多了，但对我没有用。页面正在被重定向和重新加载。

我的代码如下：

$(document).ready(function()  {
  $(".fixed").click(function(e) { 
    var action_url1 = $(this).attr('delhref');
    var qid = $(this).data('q_id');

    $('#fixedPop_url').attr('href', action_url1);
    $(".fixed").colorbox({inline:true, width:666});

    $("#fixedPop_url").click(function(event) {
       event.preventDefault();
      $("#fix_"+qid).hide();
      $("#notfix_"+qid).show();
    });       

    $(".c-btn").bind('click', function(){
      $.colorbox.close();
    });
  });
});

Answer 1

因此，您需要在url加载页面，而不是导航到它。

您可以使用.load()。

因此，在您的示例中，假设您的pop容器div类是.popup，而要加载urls内容的div有一个id (例如#container )。

$(".popup a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('delhref');

$("#container").load(url);

});

有几件事要记住，

1. 对于指向任何其他域的urls，这通常不起作用。(同一产地政策)
2. 加载此函数(.load())的任何内容都应插入容器中，并执行所有不可执行的脚本(如果有的话)。

Answer 2

你可以用history.js做这件事。以下是一个例子；

HTML:

<a href="/delete/1">Delete</a>
<a href="/update/2">Update</a>


<div id="content"></div>

JS:

var History = window.History;
if (!History.enabled) {
    return false;
}

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState();

    $('#content').load(State.url);
});

$('body').on('click', 'a', function(e) {

    var urlPath = $(this).attr('href');
    var Title = $(this).text();
    History.pushState(null, Title, urlPath);
    return false;
});

您可以在这里看到代码：jsfiddle代码

您可以在这里看到演示：小提琴演示

注意:例如，找不到 Urls。你需要根据你的需要来更新它。这只是在不刷新页面的情况下以href加载内容。