J'essaie d'afficher la ligne de bordure juste à côté de l'onglet si elle est cliquée ou de dire si elle est active. Je pourrais montrer la ligne à côté mais ça ne change pas. Je veux dire que si je clique sur un autre onglet, il ne s'affichera pas à côté de l'onglet actuellement sélectionné.
Voici comment j'ai fait
$(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>
5 réponses
<script>
$(document).ready(function() {
$('.nav.teamTab').on('click', 'a', function() {
$('.nav.teamTab a.active').removeClass('active');
$(this).addClass('active');
});
});
</script>
Dans votre JS, veuillez changer le code ci-dessous.
$(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').removeClass('active');
$('.nav-link').removeClass('active');
$('.tab-pane').hide();
if($(this).hasClass('active')) {
$(this).removeClass('active');
}
else{
$(this).addClass('active');
$(content_id).show();
}
});
});
son parce que votre code js vous devez ajouter et supprimer la classe active sur la fonction de clic:
$('.nav-link').on('click', function(){
$('.nav-link').removeClass('active');
$(this).addClass('active');
var content_id = $(this).attr('href');
$('.tab-pane').hide();
$(content_id).show();
});
Modifiez la fonction de clic comme ceci,
$('.nav-link').on('click', function() {
$('.nav-link').removeClass('active');
$(this).addClass('active');
var content_id = $(this).attr('href');
$('.tab-pane').hide();
$(content_id).show();
});
Supprimez toutes les active
classes de .nav-link
, sauf celles sur lesquelles vous cliquez actuellement:
$('.nav-link').on('click', function(){
$(this).addClass("active");
$(".nav-link").not($(this)).removeClass("active");
});
$(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(){
$(this).addClass("active");
$(".nav-link").not($(this)).removeClass("active");
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>
De nouvelles questions
html
HTML (HyperText Markup Language) est le langage de balisage pour créer des pages Web et d'autres informations à afficher dans un navigateur Web. Les questions concernant le HTML doivent inclure un exemple reproductible minimal et une idée de ce que vous essayez d'accomplir. Cette balise est rarement utilisée seule et est souvent associée à [CSS] et [javascript].