javascript - 如何为 JavaScript 选项卡创建 HTML 书签 anchor

Question

我有一个看似简单的问题，但我今天找不到解决方案。我如何创建一个书签(即 example.com/somepage#mybookmark)自动打开 JavaScript 选项卡下的元素，例如建议在 w3schools 上使用的选项卡？

我试过分配一些 id s 到 <li>构成选项卡的元素，例如:

<li id="mybookmark"><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>

甚至是 anchor 名称，例如:

<li><a name="mybookmark" href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>

但到目前为止，我在尝试 example.com/somepage#mybookmark 时得到的最好结果只是突出显示选项卡，而没有打开与其关联的内容(这正是我真正想要的)。

我认为答案在于一些 JavaScript 代码，但有人可以建议它应该是什么样子吗？

Answer 1

尝试这样的事情:

$(function () {
    $(".tab-content").hide().first().show();
    $(".yourNav li:first").addClass("active");

    $(".yourNav a").on('click', function (e) { 
    e.preventDefault();
    $(this).closest('li').addClass("active").siblings().removeClass("active");
    $($(this).attr('href')).show().siblings('.tab-content').hide();
});

    var hash = $.trim( window.location.hash );
    if (hash) $('.inner-nav a[href$="'+ hash + '"]').trigger('click');
});

基本上，您会根据 # 上的 url 强制选项卡的 .click()。您说您已经拥有的顶部部分，即选项卡可以正常打开等等，它是声明 var hash = 的第二部分。让我知道，祝你好运。