Sélection automatique d'un onglet sur un bouton HTML cliquez sur le nom de l'onglet au lieu de l'onglet

Question

Comment sélectionner automatiquement un onglet sur un bouton HTML cliquez sur en utilisant le titre de l'onglet au lieu de son index. En utilisant l'index de l'onglet il peut être fait comme ceci:

$(".selector").tabs("option", "active", index_of_tab); 

Pour plus de détails se référer this

Est-il possible d'obtenir id onglet de titre de l'onglet afin que je puisse utiliser le code ci-dessus? Ou est-il possible de sélectionner automatiquement un onglet en utilisant le nom de l'onglet?

Answer 1

Vous pouvez obtenir l'ID de l'onglet contenant ce titre, après quoi vous obtiendrez l'ID de cet ID (en utilisant la sous-chaîne) et enfin sélectionnez l'onglet par index (en utilisant le numéro d'identification -1).

J'ai créé une fonction pour effectuer ces actions fselectTabByTitle(title)

Bellow, vous trouverez un exemple complet:

$(document).ready(function() { 
 
    $("#tabs").tabs(); 
 

 

 
    $(".btn").on("click", function() { 
 
    selectTabByTitle($(this).data("title")) 
 
    }) 
 

 
}); 
 

 
function selectTabByTitle(title) { 
 
    var tab = $("#tabs ul>li a:contains(" + title + ")"); 
 
    if (tab[0]) { 
 
    var tabid = tab[0].id; 
 
    var tabIndex = tabid.substr(tabid.length - 1); 
 
    $('#tabs').tabs('option', 'active', tabIndex - 1); 
 
    } 
 
}

#tabs { 
 
    width: 95%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" /> 
 

 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#tabs-1">Tab 1</a> 
 
    </li> 
 
    <li><a href="#tabs-2">Tab 2</a> 
 
    </li> 
 
    <li><a href="#tabs-3">Tab 3</a> 
 
    </li> 
 
    </ul> 
 
    <div id="tabs-1"> 
 
    <p>Content for Tab 1</p> 
 
    </div> 
 
    <div id="tabs-2"> 
 
    <p>Content for Tab 2</p> 
 
    </div> 
 
    <div id="tabs-3"> 
 
    <p>Content for Tab 3</p> 
 
    </div> 
 
</div> 
 
<div id="tabid"></div> 
 
<button class="btn" data-title="Tab 1"> 
 
select Tab1 
 
</button> 
 
<button class="btn" data-title="Tab 2"> 
 
select Tab2 
 
</button> 
 
<button class="btn" data-title="Tab 3"> 
 
select Tab3 
 
</button>

Answer 2

Pour ce faire, vous devez obtenir l'index de l'onglet en utilisant le nom de l'onglet qui peut être fait comme indiqué ci-dessous,

var index = $('#tabs a[href="#your-tab"]').parent().index(); 

Dans le code ci-dessus un [# votre onglet] est lien donné à votre onglet, Après avoir obtenu l'index que vous pouvez faire,

$(".selector").tabs("option", "active", index); 

Espérons que cela aidera.