javascript - Jquery .hash 不适用于 Bootstrap 选项卡

Question

我有一个带有 Bootstrap 选项卡的页面，我想从外部页面链接该选项卡。这样我就可以立即访问我感兴趣的内容。

尽管我读了很多关于 Matter 的问题，但我还是无法真正达到目标。我编写的代码对我不起作用:

var hash = document.location.hash;
if (hash) {
    $('.nav-tabs a[href='+hash+']').tab('show');
} 
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
});

我的 HTML 如下

<ul id="profile-tabs" class="nav-tabs">
    <li class="active"><a href="<?php echo get_permalink(); ?>#general-informations" data-toggle="tab"><?php _e("General Info",'Mytheme');?></a></li>
    <li class=""><a href="<?php echo get_permalink(); ?>#other" data-toggle="tab"><?php _e("Other",'Mytheme');?></a></li>
</ul>

我想也许我使用 .hash 的方式是错误的。你能帮助我或提出类似的答案吗？我的意思是我几乎读过所有这些但没有成功。 谢谢。

Answer 1

您的 CSS 选择器不正确。您正在尝试匹配苹果和橙子。

如果您的第一个 anchor 标记的 href 属性设置为 http://localhost/somehwhere/#general-informations 并且您的 URL 栏以 #general 结尾-informations 那么您的 CSS 选择器 a[href='+hash+'] 将尝试进行直接匹配。不幸的是，字符串 http://localhost/somehwhere/#general-informations 不等于字符串 #general-informations。

你想要的是CSS以选择器结尾:$=，使用这个:

$('.nav-tabs a[href$="'+hash+'"]').tab('show');

这将选择所有带有 href 属性且以 hash 变量值结尾的 anchor 标记。