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不同

回答

相關問題