Automatisches Auswählen einer Registerkarte bei HTML-Schaltflächen Klicken Sie auf den Tabnamen anstelle der Registerkarten-ID

Question

So wählen Sie eine Registerkarte bei HTML-Schaltflächen automatisch aus, indem Sie den Titel der Registerkarte anstelle des Indexes verwenden. Durch Registerkarte Index verwendet, kann es wie folgt geschehen:

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

Einzelheiten this siehe

Gibt es eine Möglichkeit Tab-ID von Registerkarte Titel zu bekommen, so dass ich den obigen Code verwenden kann? Oder gibt es eine Möglichkeit, eine Registerkarte mithilfe des Tab-Namens automatisch auszuwählen?

Answer 1

Sie können die ID des Tabs mit diesem Titel abrufen, danach erhalten Sie die ID aus dieser ID (mit Teilzeichenfolge) und schließlich wählen Sie die Registerkarte nach Index (ID-Nummer -1).

Ich habe eine Funktion erstellt diese Aktion fselectTabByTitle(title)

Bellow Sie ein vollständiges Beispiel finden auszuführen:

$(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

Dazu müssen Sie mithilfe von Registernamen Index des Registerkarte erhalten, wie unten,

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

In oben gezeigten Code getan werden kann, ein [# your-tab] Link zu Ihren Registerkarte gegeben ist, Nachdem Sie Index bekommen haben, können Sie tun,

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

Hoffe, dass dies helfen wird.