我有一些引导选项卡,如果用户单击一个我想先验证当前窗格,如果验证失败,我想取消切换到新选项卡窗格。
我向选项卡锚添加了一个onclick处理程序,从中我看到选项卡尚未更改,我现在想要阻止更改。
我尝试了e.preventDefault()并返回false,但标签仍然有效。
function noteTabClick(e,el) {
debugger;
console.log("note tab click");
console.log(el.href);
var targetId = el.href.substr( el.href.indexOf("#"));
console.log(targetId);
//var target = $(targetId);
console.log($(targetId).hasClass("active"));
console.log($("#profile").hasClass("active"));
//do something
e.preventDefault();
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs tabs-inline tabs-top">
<li class='active'>
<a href="#profile" data-toggle='tab'>
<i class="fa fa-user"></i>Profile</a>
</li>
<li>
<a href="#notes" onclick="noteTabClick(event, this);" data-toggle='tab'>
<i class="fa fa-sticky-note-o"></i>Notes</a>
</li>
<li>
<a href="#events" data-toggle='tab'>
<i class="fa fa-recycle"></i>Events</a>
</li>
</ul>
<div class="tab-content padding tab-content-inline tab-content-bottom">
<div class="tab-pane active" id="profile">
Profile
</div>
<div class="tab-pane active" id="notes">
Notes
</div>
<div class="tab-pane active" id="events">
Events
</div>
</div>