jQuery .load方法导致页面刷新AJAX

我有一个functionJSP页面，它接受URL参数并使用基于这些参数的信息更新页面上的表。

我有一组不同的选项卡，它们将所述URL paraneters传递给它们所在的页面，然后重新加载并显示这些新数据。

我一直在尝试使用jQuery .load和.ajax方法，这样我就可以将这些URL参数传递给服务器上的页面，然后只通过AJAX提供表，而不是整页刷新。

我遇到的问题是，有时页面会刷新，我无法解决为什么会发生这种情况。

这是jQuery：

$('ul#coverTabs > li').live('click', function() { // Removes default class applied in HTML and onClick adds 'currentTab' class $(".currentTab").removeClass("currentTab"); $(this).addClass("currentTab"); // Find href of current tab var $tabValue = $('ul#coverTabs > li.currentTab > a').attr('href'); // Load new table based on href URL variables $('#benefit').load($tabValue + ' #' + 'benefit'); /*$.ajax({ cache: false, dataType: "html", url: $tabValue, success: function(data) { //var $tableWrap = $('#benefit'); //$('.benefitWrap').append($('.benefitWrap')); //alert($tableWrap); }, });*/ return false; }); 

以下是标签的HTML：

 
 
Individual
 
Couple
 
Family
 
Single Parent Family
  

Answer 1

当用户单击li元素时，您将返回false，这不会阻止li元素中的元素触发。 您需要覆盖其默认操作以防止它们被触发：

 $('ul#coverTabs > li > a').click(function(event) { event.preventDefault(); } 

Answer 2

您应该在单击处理程序中阻止默认操作（导航到链接URL）：

在您的代码中，不会阻止默认操作，因此当用户单击该链接时，浏览器将开始导航到HREF URL。