如何从选项卡内部切换到另一个选项卡？

Question

下面是我的html代码，我想要做的是从一个选项卡导航到另一个选项卡的内部，通过保持链接，如你可以看到的，但这不是发生在我的尝试，而是没有发生，当我点击链接，我无法找到任何理由，Pls。提前给我一个简单的解决方案，谢谢。

<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">
        Your content goes here for tab 1
        <a href="#tabs-2">Tab 2</a>
        <a href="#tabs-3">Tab 3</a>
    </div>
    <div id="tabs-2">
        Your content goes here for tab 2
        <a href="#tabs-1">Tab 1</a>
        <a href="#tabs-3">Tab 2</a>
    </div>
    <div id="tabs-3">
        Your content goes here for tab 3
        <a href="#tabs-1">Tab 1</a>
        <a href="#tabs-2">Tab 2</a>
    </div>
</div>

Answer 1

下面是一个jquery示例，它使用数据标记属性，可以使您指向正确的方向jsFiddle。

HTML

<div id="tabs">
    <ul>
        <li><a data-tab="1" href="#">Tab 1</a></li>
        <li><a data-tab="2" href="#">Tab 2</a></li>
        <li><a data-tab="3" href="#">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        Your content goes here for tab 1
        <a data-tab="2" href="#">Tab 2</a>
        <a data-tab="3" href="#">Tab 3</a>
    </div>
    <div id="tabs-2">
        Your content goes here for tab 2
        <a data-tab="1" href="#">Tab 1</a>
        <a data-tab="3" href="#">Tab 3</a>
    </div>
    <div id="tabs-3">
        Your content goes here for tab 3
        <a data-tab="1" href="#">Tab 1</a>
        <a data-tab="2" href="#">Tab 2</a>
    </div>
</div>

Javascript

$(document).on('click', '#tabs a', function(_e) {
    _e.preventDefault()
    // Get the tab to select
    var tabToSelect = $(this).data('tab');
    // Hide all the tabs
    $('#tabs > div').hide();
    // Show the selected tab
    $('#tabs-' + tabToSelect).show();
});