index.php＃与index.php不同

在我使用bootstrap的代码中，我遇到了一个问题。index.php＃与index.php不同

我使用JS代码如下所示。

$("li:eq(1)").click(function() { 
      $.get("./test.php") 
       .done(function(data) { 
        $('#middle').html(data); 
      });

它是控制div。

<div class="container" id=header-nav> 
      <a class="brand" href="index.php"></a> 
      <div class="nav-collapse collapse" > 
       <ul class="nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="test.php">test</a></li> 
....... 
<div class="container" id="middle"> </div>

当我点击测试按钮时，链接将更改为test.php#，但没有任何更改。再次点击，它可以加载到test.php。

问题是链接是test.php，代码不起作用。当它test.php#，它的工作。我想知道为什么。

非常感谢。

来源

2013-08-19 kelyiu3000

使用$不用彷徨试图提醒消息之前。如果不工作，则需要将正确的值传递给点击事件。如果它的工作检查你的test.php文件路径。 –

请不要使用'alert'进行调试。 – putvande

问题是因为您已将处理程序附加到li元素，但单击了a元素，然后传输页面。试试这个：

$("li:eq(1) a").click(function(e) { 
    e.preventDefault(); 
    $.get("./test.php") 
     .done(function(data) { 
      $('#middle').html(data); 
     }); 
});

的preventDefault()停止链接的默认行为，这意味着你的AJAX请求被按要求执行。

来源

2013-08-19 09:46:55

嗨，问题仍然存在。任何其他建议？ – kelyiu3000

@ kelyiu3000没有理由，这不应该工作。尝试检查控制台是否有错误（按'F12'） –

，因为要使用$.get（AJAX），你不必把它的URL来<a>元素你<li>元素中，

你必须给属性href<a>元素中这个值：javascript:void(0)或者#，

您html代码如下：

<div class="container" id=header-nav> 
      <a class="brand" href="index.php"></a> 
      <div class="nav-collapse collapse" > 
       <ul class="nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">test</a></li> 
....... 
<div class="container" id="middle"> </div>

你要防止默认动作的元素，以防止重装url加入： event.preventDefault()你onclick事件和你js代码如下：

$("li:eq(1)").click(function(e) { 
event.preventDefault(); 
      $.get("./test.php") 
       .done(function(data) { 
        $('#middle').html(data); 
      });

来源

2013-08-19 09:49:14 MaveRick

index.php＃与index.php不同

回答

相关问题