Activation de l'onglet Bootstrap avec JQuery
J'ai le code suivant
<ul class="nav nav-tabs">
<li><a href="#aaa" data-toggle="tab">AAA</a></li>
<li><a href="#bbb" data-toggle="tab">BBB</a></li>
<li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
Et le script suivant
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.tab-pane a[href="#' + tab + '"]').tab('show');
};
Dans ce cas, lorsque la page est prête, le deuxième onglet sera activé mais j'obtiens toujours une erreur JavaScript dans la ligne $('.tab-pane a[href="#' + tab + '"]').tab();
Quelqu'un Peut m'aider s'il vous plaît?
6 réponses
L'application d'un sélecteur à partir du .nav-tabs semble fonctionner:
Voir cette démo.
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
Je préférerais la réponse de @codedme, car si vous savez quel onglet vous voulez avant le chargement de la page, vous devriez probablement changer le html de la page et ne pas utiliser JS pour cette tâche particulière.
J'ai également modifié la démo pour sa réponse.
(si cela ne fonctionne pas pour vous, veuillez spécifier votre paramètre-navigateur, environnement, etc.)
Effectuez un clic sur le lien vers l'ancre de l'onglet chaque fois que la page est prête, c'est-à-dire
$('a[href="' + window.location.hash + '"]').trigger('click');
Ou en JavaScript vanille
document.querySelector('a[href="' + window.location.hash + '"]').click();
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#aaa" data-toggle="tab">AAA</a></li>
<li><a href="#bbb" data-toggle="tab">BBB</a></li>
<li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane fade active in" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
</div>
Ajoutez une classe active à tout élément li que vous souhaitez activer après le chargement de la page. Et aussi l'ajout de classe active au contenu div est nécessaire, fondu dans les classes sont utiles pour une transition en douceur.
Celui - ci est assez simple à partir de w3schools: https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp
// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')
// Select first tab
$('.nav-tabs a:first').tab('show')
// Select last tab
$('.nav-tabs a:last').tab('show')
// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
Pourquoi ne pas sélectionner l'onglet actif d'abord puis activer le contenu de l'onglet sélectionné ?
1. Ajoutez d'abord la classe 'active' à l'élément De tab .
2. ensuite, utilisez la classe set 'active' sur div sélectionné.
$(document).ready( function(){
SelectTab(1); //or use other method to set active class to tab
ShowInitialTabContent();
});
function SelectTab(tabindex)
{
$('.nav-tabs li ').removeClass('active');
$('.nav-tabs li').eq(tabindex).addClass('active');
//tabindex start at 0
}
function FindActiveDiv()
{
var DivName = $('.nav-tabs .active a').attr('href');
return DivName;
}
function RemoveFocusNonActive()
{
$('.nav-tabs a').not('.active').blur();
//to > remove :hover :focus;
}
function ShowInitialTabContent()
{
RemoveFocusNonActive();
var DivName = FindActiveDiv();
if (DivName)
{
$(DivName).addClass('active');
}
}
Ajoute un attribut id à une balise html
<ul class="nav nav-tabs">
<li><a href="#aaa" data-toggle="tab" id="tab_aaa">AAA</a></li>
<li><a href="#bbb" data-toggle="tab" id="tab_bbb">BBB</a></li>
<li><a href="#ccc" data-toggle="tab" id="tab_ccc">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
Puis en utilisant JQuery
$("#tab_aaa").tab('show');