Jquery .hash 在引导选项卡上不起作用答案

【问题标题】：Jquery .hash doesn't work on bootstrap tabsJquery .hash 在引导选项卡上不起作用
【发布时间】：2016-12-03 09:34:37
【问题描述】：

我有一个带有引导选项卡的页面，我想从外部页面链接。所以我可以立即访问我感兴趣的内容。

尽管我阅读了很多关于物质的问题，但我还是无法真正达到目标。我写的这段代码对我不起作用：

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。你能帮助我或提出类似的答案吗？我的意思是我已经阅读了几乎所有没有成功的书。谢谢。

【问题讨论】：

标签： javascript jquery twitter-bootstrap hash tabs

【解决方案1】：

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

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

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

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

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

【讨论】：