Link 直接从锚 link 到标签页

Question

我正在尝试直接从锚点 linking link 返回 3 选项卡，但我无法使其正常工作。它在菜单中运行完美，但是当我尝试 link 从 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>

Link 直接从锚 link 到标签页

Link directly to tab from anchor link

javascript

jquery

tabs

jquery-ui-tabs