jquery插件:tabs页签
.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{...
·
.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");
})
注意:添加了class类为“disable”的tab将被禁掉。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)