Question

我花了大约一个月的时间（反复地）尝试对这个类似问题的其他答复，但无济于事。最近一个：Opening Bootstrap 4 accordions using URL，但我浏览了SOF上Google搜索结果的前六页（搜索字符串：从另一个页面引导程序4链接到手风琴的一部分）。

我正在使用Bootstrap Studio生成有问题的网站。它允许一些自定义代码，您可以向其中添加JavaScript，但是我无权访问所有使用的JS和JQuery文件。

我有：index.html，带有指向about.html的“更多”按钮链接。 About.html包括一个具有四个相关主题的手风琴。我希望index.html上的“阅读更多”链接跳转至about.html并打开第三张卡片。这是手风琴代码的一部分；有很多可能多余的ID和/或类，因为我尝试了大约6种不同的方法来使它起作用。

    <div role="tablist" id="aboutpage">
      <div class="card">
        <div class="card-header" role="tab">
          <h5 class="mb-0">
            <a data-toggle="collapse" aria-expanded="false" aria-controls="aboutpage .item-1" href="div#aboutpage .item-1" id="history" class="collapsed">History of EPSCoR<i class="fas fa-chevron-down pull-right"></i></a></h5>
        </div>
        <div class="collapse item-1" role="tabpanel" data-parent="#aboutpage">
          <div class="card-body">
            <p>The Experimental Program to Stimulate Competitive Research (EPSCoR) was established by the National Science Foundation (NSF) in 1979. The program goal: to strengthen U.S. research and education in science and engineering.<br /></p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" role="tab">
          <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="aboutpage .item-2" href="div#aboutpage .item-2" id="nh-history" class="collapsed">New Hampshire NASA EPSCoR<i class="fas fa-chevron-down pull-right"></i></a></h5>
        </div>
        <div class="collapse item-2" role="tabpanel" data-parent="#aboutpage">
           <div class="card-body">
 <p>In 2004, the National Science Foundation designated New Hampshire an EPSCoR state. That EPSCoR designation then qualified New Hampshire researchers and research jurisdictions to apply for EPSCoR funds from federal agencies with
 EPSCoR programs—NASA being one of those agencies.<br /></p>
</div>
</div>
</div>
<div class="card">
<div class="card-header accordion-collapse in" role="tab" id="initiatives">
<h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="aboutpage .item-3" href="div#aboutpage .item-3" class="collapsed">NASA EPSCoR Initiatives<i class="fas fa-chevron-down pull-right"></i></a></h5>
</div>
<div class="collapse item-3" role="tabpanel" data-parent="#aboutpage">
<div class="card-body">
<div>
<p>The NASA <strong>Experimental Program to Stimulate Competitive Research</strong>, or <strong>EPSCoR</strong>, is a merit-based program designed to strengthen research capabilities in jurisdictions not equably participating
 in competitive aerospace and aerospace-related research activities. </p>
</div><a href="div#aboutpage .item-3" id="initiatives" aria-controls="aboutpage .item-3" data-toggle="collapse"><i class="fa fa-chevron-up pull-right"></i></a></div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab">
<h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="aboutpage .item-4" href="div#aboutpage .item-4" id="tac" class="collapsed">Advisory Committee<i class="fas fa-chevron-down pull-right"></i></a></h5>
</div>
<div class="collapse item-4" role="tabpanel" data-parent="#aboutpage">
<div class="card-body">
<div>
<p>[Advisory committee members</p></div><a href="div#aboutpage .item-4" id="tac" aria-controls="aboutpage .item-4" data-toggle="collapse"><i class="fa fa-chevron-up pull-right"></i></a></div>
</div>
</div>
</div>
</div>
</div>

我已经尝试了在SOF上发现的所有所有Bootstrap 4示例，以及以下示例：http://foundationphp.com/tutorials/jqui_specific.php（尽管这是针对较旧版本的Bootstrap的，并且还假设您可以编辑用于初始化Bootstrap 4的代码）。手风琴）。这是来自Foundationphp的Javascript，我意识到它的目标是面板而不是卡片，因此无法使用：

 <script type="text/javascript">
function getParam(name) {
    var query = location.search.substring(1);
    if (query.length) {
        var parts = query.split('&');
        for (var i = 0; i < parts.length; i++) {
            var pos = parts[i].indexOf('=');
            if (parts[i].substring(0,pos) == name) {
                return parts[i].substring(pos+1);
            }
        }
    }
    return 0;
}
</script>
<script type="text/javascript">
$(function() {
    var defaultPanel = parseInt(getParam('panel'));
    $( "#aboutpage" ).accordion(
        {active: defaultPanel}
    ); 
});
</script>

来自index.html的链接当前的格式如下：

about.html?panel=2#aboutpage

我的编码技能水平是相当基本的“复制/粘贴/希望它起作用”水平，这是值得的。

通过另一页上的URL打开Bootstrap 4手风琴面板

0 个答案: