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();
});

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

1 个答案: