HTML 버튼에서 탭 자동 선택 탭 ID 대신 탭 이름을 사용하여 클릭

Question

HTML 버튼에서 탭을 자동으로 선택하는 방법은 색인 대신 탭의 제목을 사용하여 클릭하십시오. 탭 인덱스를 사용하여이 같은 수행 할 수 있습니다 자세한 내용은

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

이

나는 위의 코드를 사용할 수 있도록 탭 타이틀에서 탭 ID를 얻을 수있는 방법이 있나요 this를 참조? 또는 탭 이름을 사용하여 탭을 자동 선택하는 방법이 있습니까?

Answer 1

해당 제목이 포함 된 탭의 ID를 가져올 수 있습니다. 그런 다음 해당 ID (하위 문자열 사용)에서 ID를 가져오고 마지막으로 인덱스 (ID 번호 -1 사용)를 통해 탭을 선택합니다.

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

은, 위의 코드에서, 당신의 탭으로 링크를 제공하는 [# 당신의 탭]을

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

를 아래 그림과 같이 할 수있는 탭 이름을 사용하여 탭의 인덱스를 얻을 수있는이 수행 색인을 얻은 후에는

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

희망이 도움이 될 것입니다.