javascript - 使用 URL 参数模拟点击

Question

我目前正在开发一个页面，其中包含 4 个不同的选项卡，可使用 Javascript 进行动画/切换。

我希望能够锚定这些选项卡，以便根据 URL 参数访问所选选项卡。

但是，目前从一个选项卡切换到另一个选项卡的唯一方法是单击它。

因此，我认为一个简单的方法是设置页面的 4 个不同的 URL。例如。

pagename.com#1
pagename.com#2
pagename.com#3
pagename.com#4

每个数字都模拟点击选项卡 1 到 4。

我能实现这样的目标吗？

非常感谢，杰洛特

Answer 1

正如上面的答案所述，您可以使用window.location.hash更改哈希值。但是，如果您的选项卡未绑定(bind)该功能，则事件选项卡不会仅通过添加/更改哈希来更改。您需要做的是在 javascript 中查看当前哈希并确定要显示哪个相应的选项卡/面板...查看此示例:

HTML:

<div id="tabs">
    <div><a href="#1">Tab 1</a></div>
    <div><a href="#2">Tab 2</a></div>
    <div><a href="#3">Tab 3</a></div>
    <div><a href="#4">Tab 4</a></div>
</div>

<div id="panels">
    <div id="1">I am a panel 1</div>
    <div id="2">I am a panel 2</div>
    <div id="3">I am a panel 3</div>
    <div id="4">I am a panel 4</div>
</div>

CSS:

#tabs > div {
    display: inline-block;
}

#panels > div {
    display: none;
}

JS:

$(document).ready(function () {
    // if you want the first one shown...
    window.location.hash = '#1';
    // initially check...
    var h = window.location.hash;
    var panel = findPanel(h);
    if (panel) {
        panelCleanUp()
        $(panel).show();
    }

    $('#tabs').on('click', 'a', function () {
        setTimeout(function () { // let the hash update...
            var hasher = window.location.hash;
            var panel = findPanel(hasher);
            if (panel) {
                panelCleanUp();
                $(panel).show();
            }
        }, 0);
    });
});


function findPanel(hasher) {
    return $('#panels ' + hasher)[0];
}

function panelCleanUp() {
    $('#panels > div').each(function () {
        $(this).hide();
    });
}

See the Fiddle