我有一个显示选项卡内容的脚本。这部分工作正常,但是当用户单击链接时,浏览器似乎执行单击并将用户带回页面顶部。 我在脚本中返回 false 以取消 ent click,并且还尝试使用 event.preventDefault() 但也没有运气。 这是 HTML:
<ul class="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div id="content">
<h2>Tab 1</h2>
<p>Tab 1 info here </p>
</div>
</div>
<div id="tab2" class="tab_content">
<h2>Tab 2</h2>
<p>This is tab 2 here</p><br />
<p>This is tab 2 here</p><br />
</div>
<div id="tab3" class="tab_content">
<h2>Tab 3</h2>
<p>tab 3 info here</p>
</div>
</div>
这是 JS:
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//attribute an idea to each tab
$('.tabs li').each(function(i) {
var thisId = $(this).find("a").attr("href");
thisId = thisId.substring(1,thisId.length) + '_top';
$(this).attr("id",thisId);
});
function changeTab(activeTab)
{
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(activeTab + '_top').addClass("active"); //Add "active" class to selected tab, using the id created at document load
$(".tab_content").hide(); //Hide all tab content
$(activeTab).fadeIn(); //Fade in the active content
}
//On Click Event
$("ul.tabs li").click(function() {
//call above function
changeTab($(this).find("a").attr("href"));
//event.preventDefault();
return false;
});
});
最佳答案
您将 click 事件应用于 LI 元素,如果您希望 return false;
起作用,您应该将 onclick 应用于 A 标记。
$("ul.tabs li a").click(function() {
changeTab($(this).attr("href"));
return false;
}
关于jquery 取消脚本后的点击操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12892981/