从锚链接直接链接到选项卡

Question

I am trying to directly linking from anchor link like Go back to 3 tab And i can't make it working. It's working perfectly from the menu but when i am trying to linking from the tab5 to tab3 is not working with anchor.

Here is the JS i am using.

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

Is something wrong on my code or missing?

Answer 1

If i correctly understood you want to change tab programmatically, if so you can use $('.tabs').tabs('option', 'active', tab_index); , check example bellow.

Hope this helps.

---

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