.my-nav {
clear: both;
}
.my-nav li {
height: 30px;
width: 100px;
float: left;
}
.my-tab-content {
clear: both;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
a.disable {
color: #999999;
text-decoration: none;
}
<!-- Nav tabs -->
<ul class="my-nav">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
data-toggle="tab">Settings</a></li>
<li role="presentation"><a href="#forbid" class="disable">禁止</a></li>
</ul>
<!-- Tab panes -->
<div class="my-tab-content">
<div class="tab-panel active" id="home">1</div>
<div class="tab-panel" id="profile">2</div>
<div class="tab-panel" id="messages">3</div>
<div class="tab-panel" id="settings">4</div>
<div class="tab-panel" id="forbid">5</div>
</div>
$(".my-nav li a").click(function () {
let id = $(this).attr("href").substring(1);
$(".tab-panel").removeClass("active");
$("#" + id).addClass("active");
$(".disable").attr("disabled", true).css("pointer-events", "none");
})