2016-09-22 67 views
0

這裏是我的代碼.load()不工作UL李點擊

$(document).ready(function(){ 
 
    $("#work").click(function(){ 
 
    $("#container").load("about/work.html"); 
 
    }); 
 
    $("#profile").click(function(){ 
 
    $("#container").load("profile.html"); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a id="work" href="">work</a></li> 
 
    <li><a id="profile" href="">profile</a></li> 
 
</ul> 
 

 
<div id="container"></div>

當我點擊工作或輪廓請求的頁面只是閃爍在div容器和某個停留在但若我運行同樣的腳本按鈕點擊它加載頁面沒有任何問題。我如何使它與李一起工作?

+0

你檢查你的瀏覽器控制檯上的任何錯誤的值#。 ? –

+0

您的點擊處理程序不會停止瀏覽器執行鏈接的默認行爲:轉到href屬性中定義的位置(空值=這個非常相同的位置) - > ['.preventDefault()']( https://api.jquery.com/event.preventdefault/) – Andreas

+0

不要將'href'作爲空字符串。給它一個值:'href =「#」' –

回答

1

添加event.preventDefault

$(document).ready(function(){ 
    $("#work").click(function(event){ 
    event.preventDefault(); //changed here 
    $("#container").load("about/work.html"); 
    }); 
    $("#profile").click(function(event){ 
    event.preventDefault(); //changed here 
    $("#container").load("profile.html"); 
    }); 
}); 
+0

它的工作!謝謝 –

0

嘗試onclick

$(document).ready(function() { 
    $("#work").on("click", function() { 
     $("#container").load("about/work.html"); 
    }); 
}); 
1

有兩件事情在這裏改變。

1)儘量不要將您的href值留空。如果你這樣做,那麼瀏覽器將重定向到同一頁面。給它如果可能的話href="#"

2)有preventDefault()功能從<a>單擊事件失蹤

$(document).ready(function(){ 
    $("#work").click(function(e){ 
     e.preventDefault(); 
     $("#container").load("about/work.html"); 
    }); 
    $("#profile").click(function(e){ 
     e.preventDefault(); 
     $("#container").load("profile.html"); 
    }); 
});