如何防止使用jquery在href上進行請求？

Question

也許我正在嘗試以錯誤的方式進行操作，但是我已經將服務器設置為根據請求構建頁面（如果基本上未啟用JS），否則我希望它發送請求的頁面，然后JS應該覆蓋主導航，僅使用jQueries .load函數請求並顯示內容。

我已經有一個輔助函數來發出請求並顯示結果，它只需要一個字符串作為輸入，即頁面的名稱。 加載頁面后，我運行$ .each語句來設置hrefs，但是在檢查DOM時似乎沒有顯示，我不確定為什么。

var $menuAnchors = $("#menu a");
$.each($menuAnchors, function (index, value) {
if (index == 0) {
  $menuAnchors.eq(0).click('home', setCurrentPage);
}
if (index == 1) {
  $menuAnchors.eq(1).click('services', setCurrentPage);
}
if (index == 2) {
  $menuAnchors.eq(2).click('contact', setCurrentPage);
}

})

它可以很好地到達if語句中，因此我必須在錯誤地使用.click函數，但是我也嘗試將其與.attr函數一起應用，然后它確實出現在dom中，但似乎並沒有好好工作。 如果我手動調用該函數來更改頁面，則它可以正常工作，因此我假設此時兩個事件觸發方法都可以正常工作，但也許它仍將請求發送到服務器，並且我需要停止發生事件？ 如果是這樣，我該怎么做？ 我可以在此if語句中執行此操作，還是必須修改我的evenhandler函數？ 這是函數btw：

var setCurrentPage = function(page) {

//change contents
var $content = $("#content");
$content.empty();
$content.load("/html/ajax/" + page + ".html");

//set menubar class
var $listItems = $("#menu li");
$.each($listItems, function (index, value) {
  $listItems.eq(index).removeAttr("class");
  if (page == "home" && index == 0) {
    $listItems.eq(index).attr("class", "current");
  }
  if (page == "services" && index == 1) {
    $listItems.eq(index).attr("class", "current");
  }
  if (page == "contact" && index == 2) {
    $listItems.eq(index).attr("class", "current");
  }
  })

}

Answer 1

當觸發jQuery事件時，jQuery會將event對象作為第一個（也是唯一的）參數傳遞給該方法。

第一個問題是setCurrentPage的“頁面”參數不是href，而是事件對象。

因此，讓我們繼續將函數清理為var setCurrentPage = function(e) {現在，您可以通過e.data訪問帶有第一個參數的click數據，因此只需將頁面的任何引用更改為e.data 。

最后，要使其不被訪問，可以調用e.preventDefault() 。

（要點： removeClass可以在元素的集合上調用，而無需遍歷each元素。觸發事件時， this將引用事件發生的HTML元素，因此我們可以使用該元素來強制current類。） 。

最終代碼看起來像

function setCurrentPage(e) {
    //change contents
    var $content = $("#content");
    $content.empty();
    $content.load("/html/ajax/" + e.data + ".html");
    //set menubar class
    $("#menu li .current").removeClass('current');
    $(this).addClass('current');
}

Answer 2

根據您的澄清，從維護的角度來看，如果有人更改了鏈接，他們會在編輯鏈接的位置看到pagename參數，這仍然是從維護角度來看最好的方法。

HTML示例：

<div id="menu">
    <a href="/" data-pagename="home">Home</a>
    <a href="/about.html" data-pagename="about">About</a>
</div>

JavaScript示例：

$('#menu a').click(function(){
    setCurrentPage($(this).data('pagename')))
    return false;
});

這樣做的副作用是，您可以將這種方法與#menu完全脫鈎，在下面的示例中，在向鏈接添加data-pagename =“ something”的任何位置，該鏈接將立即使用setCurrentPage代替。

$('a[data-pagename]').click(function(){
    setCurrentPage($(this).data('pagename')))
    return false;
});