我试图在选项卡的旁边显示边框线,或者单击它是否处于活动状态。我可以显示它旁边的线,但它不会改变。我的意思是,如果我单击其他选项卡,它将不会显示在当前选择的选项卡旁边。
这是我做的
$(document).ready(function() {
$('.nav-link').each(function(){
var content_id = $(this).attr('href');
$(this).after($(content_id).hide());
if($(this).hasClass('active')) {
$(content_id).show();
}
});
$('.nav-link').on('click', function(){
var content_id = $(this).attr('href');
$('.tab-pane').hide();
$(content_id).show();
});
});
.child {
padding-left: 60px;
padding-right:100px
}
a.nav-link span {
position: relative;
}
a.nav-link.active span:before {
position: absolute;
content: "";
width: 25px;
height: 5px;
border-bottom: 4px solid #e64a19;
top: 8px;
left: -35px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="teams" class="tabbable tabs-left">
<div class="container">
<div class="row">
<nav class="nav flex-column col-md-1 teamTab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" href="#category1-tab" data-toggle="pill" role="tab"><span>Category1</span></a>
<a class="nav-link" href="#category2-tab" data-toggle="pill" role="tab"><span>Category2</span></a>
<a class="nav-link" href="#category3-tab" data-toggle="pill" role="tab"><span>Category3</span></a>
</nav>
<div class="tab-content col-md-11">
<div class="tab-pane child active" id="category1-tab">
<h5 class="card-title">Name</h5>
<p class="card-title">position</p>
</div>
<div class="tab-pane child" id="category2-tab">
<h5 class="card-title">Category 2 Name</h5>
<p class="card-title">position</p>
</div>
<div class="tab-pane child" id="category3-tab">
<h5 class="card-title">Category 3 Name</h5>
<p class="card-title">position</p>
</div>
</div>
</div>
</div>
</div>
最佳答案
<script>
$(document).ready(function() {
$('.nav.teamTab').on('click', 'a', function() {
$('.nav.teamTab a.active').removeClass('active');
$(this).addClass('active');
});
});
</script>