Bonsoir,
Avec une nav-tabs de bootstrap. J'ai essaye que quand je click sur une table sa m'affiche l'autre le probléme c'est qu'a un moment sa m'affiche 2 tabs au lieu de une. Comment je pourais ameliore mon code.
PS : Je débute dans la JavaScript
Code Js :
$commandecour.click(function () {
$('#1').removeClass();
$('#2').addClass('active');
$('#c1').hide();
$('#c2').show();
});
$commande.click(function () {
$('#2').removeClass();
$('#1').addClass('active');
$('#c2').hide();
$('#c1').show();
});
$commandetermine.click(function () {
$('#1').removeClass();
$('#3').addClass('active');
$('#c1').hide();
$('#c3').show();
});
Code Html
<div class="container">
<ul class="nav nav-tabs nav-cod">
<li id="1" role="presentation" class="active"><a id="commande" href="#">Commande (4)</a></li>
<li id="2" role="presentation"><a id="commandecour" href="#">Commande En Cour (5)</a></li>
<li id="2" role="presentation"><a id="commandeterminé"href="#">Commande Terminé (0) </a></li>
</ul>
<div id="c1" class="commande">
commende total
</div>
<div id="c2" class="commandes">
commande en cour
</div>
<div id="c3" class="commandess">
commande recus
</div>
</div>
Code css
.commande {
min-height: 200px;
width: 700px;
background-color: #fff;
border: 1px solid #ddd;
margin-left: 110px ;
margin-right:auto;
}
#c1 {display: block;}
#c2 {display: none;}
#c3 {display: none;}
.commandes {
min-height: 200px;
width: 700px;
background-color: #fff;
border: 1px solid #ddd;
margin-left: 110px ;
margin-right:auto;
}
.commandess {
min-height: 200px;
width: 700px;
background-color: #fff;
border: 1px solid #ddd;
margin-left: 110px ;
margin-right:auto;
}