如果验证失败,请取消引导选项卡单击

时间:2016-12-29 21:55:13

标签: twitter-bootstrap tabs

我有一些引导选项卡,如果用户单击一个我想先验证当前窗格,如果验证失败,我想取消切换到新选项卡窗格。

我向选项卡锚添加了一个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>

0 个答案:

没有答案