从 url 哈希打开并滚动到选项卡（JS/Jquery/Bootstrap）答案

【问题标题】：Open and scroll to tab from url hash (JS/Jquery/Bootstrap)从 url 哈希打开并滚动到选项卡（JS/Jquery/Bootstrap）
【发布时间】：2017-01-04 10:40:51
【问题描述】：

所以我有一个深度嵌套的评论系统。我正在使用引导 javascript 文件，但只有折叠和动画 css 样式。所以我不使用nav-tab之类的

在所有有回复的 cmets 上都有一个按钮。数字1指的是父ID（id为1的评论回复）。

<a class="btn" type="button" data-toggle="collapse" href="#replies_1">X replies</a>

然后我有一个div，就是父评论的所有孩子的容器

<div class="collapse" id="replies_1">

当我点击锚点时，正如你所猜想的那样，这个 div 会附加 in 类并很好地转换以打开并显示 cmets 子级。

除了滚动部分，我已经尝试过一种有效的方法

$(document).ready(function(){
    if(window.location.hash != "") {
        $('a[href="' + window.location.hash + '"]').click();
    }
});

这会打开正确的选项卡，这很棒。但是，由于选项卡具有 collapse 类，该类具有 css 规则 display:none; 并添加了内联规则 display: none;

现在，我的脚本无法滚动到正确的位置，因为折叠的元素具有这些规则。

不过，我真的不需要滚动到回复，而是滚动到父级。

所以我真正需要的是滚动到另一个具有相同后缀 ID 但前缀不同的锚 ID，但仍像使用上面的代码一样打开回复选项卡

由于子项位于 ID 为 replies_{id} 的选项卡内，因此我可以滚动到父项，它是 ID 为 comment_{id} 的 ul 项

ul 看起来像这样：<ul class="comment__item" id="comment_{id}">

【问题讨论】：

这似乎和stackoverflow.com/q/7862233/215552是同一个问题？
您有工作示例的链接吗？
能否分享您的代码示例。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

试试这个方法，

 $(document).ready(function(){
    if(window.location.hash != "") {
        var end_id = window.location.hash.split('__')[1];
        $("html,body").animate({scrollTop: $("[id$='__"+ end_id +"'").offset().top},"slow");
    }

});

【讨论】：

【解决方案2】：

如果我正确理解了您的问题，我认为这会起作用。实际上，您可以从该 url 获取主题标签并从您的哈希 #replies__{id} 中找到 id，然后从中收集 {id} 并在另一个 id #comment__{id} 的所需文本前面加上前缀，这样您就可以执行相同的操作了。

例如

//收集hash后考虑这个事件

hashValue = "replies__1232" //assuming the default value 
oldId = hashValue.split("__")[1] // collect id

//now append id to required prefix
$("#comment__" + oldId).click(function(){
   //required stuff here   
}) ;

【讨论】：