Ссылка непосредственно на вкладку с привязной ссылки

Question

Я пытаюсь напрямую связать ссылку привязки, например, вернуться к 3 вкладкам И я не могу заставить ее работать. Он отлично работает из меню, но когда я пытаюсь установить связь с tab5 на tab3, он не работает с привязкой.

Здесь я использую JS.

<script type="text/javascript"> 




jQuery(document).ready(function() { 
    jQuery('.tabs .tab-links a').on('click', function(e) { 
     var currentAttrValue = jQuery(this).attr('href'); 

     // Show/Hide Tabs 
     jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); 



     // Change/remove current tab to active 
     jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 

     e.preventDefault(); 
    }); 





}); 

</script> 

Что-то не так в моем коде или отсутствует?

Answer 1

Если я правильно понял, что вы хотите поменять вкладку программно, если вы можете использовать $('.tabs').tabs('option', 'active', tab_index);, см. Пример ниже.

Надеюсь, это поможет.

---

$(function() { 
 
    $('.tabs').tabs(); 
 

 
    $("#go_to_tab_3").click(function() { 
 
     $('.tabs').tabs('option', 'active', 2); //index 2 mean tab 3 
 
    }); 
 
});

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

 
<div class="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>tab 1 content.</p> 
 
    </div> 
 
    <div id="tabs-2"> 
 
    <p>tab 2 content.</p> 
 
    </div> 
 
    <div id="tabs-3"> 
 
    <p>tab 3 content.</p> 
 
    </div> 
 
</div> 
 

 
<br> 
 
<button id='go_to_tab_3' type='button'>Go to tab 3</button>