我有一个功能性JSP页面,它接受URL参数并使用基于这些参数的信息更新页面上的表。
我有一组不同的标签,可以将所述URL参数传递给它们所在的页面,然后重新加载并显示这些新数据。
我一直在尝试使用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:
<ul id="coverTabs">
<li class="currentTab"><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&productPolicyId=748#a1">Individual</a></li>
<li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&productPolicyId=749#a1">Couple</a></li>
<li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&productPolicyId=750#a1">Family</a></li>
<li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&productPolicyId=751#a1">Single Parent Family</a></li>
</ul>
答案 0 :(得分:7)
当用户点击li
元素时,您返回false,这不会阻止a
元素中的li
元素被触发。您需要覆盖其默认操作以防止它们被触发:
$('ul#coverTabs > li > a').click(function(event) {
event.preventDefault();
}
答案 1 :(得分:3)
您应该在点击处理程序中阻止默认操作(导航到链接网址):
<script>
$("a").click(function(event) {
event.preventDefault();
// your actions
});
</script>
在您的代码中,不会阻止默认操作,因此当用户单击该链接时,浏览器会开始导航到HREF URL。