查看更新的功能
$(".nav-link").on('click', function(e) {
$(".current").removeClass('current');
$(this).parent().addClass('current');
})
我添加了
$(".current").removeClass('current');
线。
您需要先从所有元素中删除当前类,然后再将其添加到所需元素中。
$(".nav-link").on('click', function(e) {
$(".current").removeClass('current');
$(this).parent().addClass('current');
})
.nav-item.current {
width: 300px;
}
<link rel="stylesheet prefetch" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item current">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>
更新的答案
(基于评论)
$(".nav-link").on('click', function(e) {
$(".current").removeClass('current');
setTimeout(function() {
$(".active").parent().addClass('current');
}, 0);
})
$(".nav-link").on('click', function(e) {
$(".current").removeClass('current');
setTimeout(function() {
$(".active").parent().addClass('current');
}, 0);
})
.nav-item.current.当前{
宽度:300px;
}
<link rel=“stylesheet prefetch”href=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
<script src=“https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>
<script src=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js”></script>
<ul class=“nav nav tabs”id=“mytab”role=“tablist”>
<li class=“nav item current”>
<A class=“nav link active”id=“home tab”data toggle=“tab”href=“home”role=“tab”aria controls=“home”aria selected=“true”>主页</A>
</li>
<li class=“nav item”>
<a class=“nav link”id=“profile tab”data toggle=“tab”href=“profile”role=“tab”aria controls=“profile”aria selected=“false”>配置文件</a>
</li>
<li class=“nav item”>
<a class=“nav link”id=“contact tab”data toggle=“tab”href=“contact”role=“tab”aria controls=“contact”aria selected=“false”>联系人</a>
</li>
</ul>
<div class=“tab content”id=“MyTabContent”>
<div class=“tab pane fade show active”id=“home”role=“tabpanel”aria labelledby=“home tab”>主页</div>
<div class=“tab pane fade”id=“profile”role=“tabpanel”aria labelledby=“profile tab”>配置文件</div>
<div class=“tab pane fade”id=“contact”role=“tabpanel”aria labelledby=“contact tab”>联系人</div>
</DIV>
