javascript - 如何从选项卡内部更改为另一个选项卡？

Question

下面是我的html代码， 我想做的是通过在其中保留链接，从任何选项卡内部导航到另一个选项卡，正如您在下面看到的那样，但是当我尝试时这并没有发生，而是当我单击链接时没有任何反应，我是找不到任何原因， 请。提前给我一个简单的解决方案，谢谢。

<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

这是一个使用 data 标签属性的 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();
});