0

我花了大约一个月（断断续续）尝试其他对这个类似问题的答复，但无济于事。最近这个：使用 URL 打开 Bootstrap 4 手风琴，但我已经浏览了 SOF 上 Google 结果的前六页（搜索字符串：从另一页 bootstrap 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 并且还假设您可以编辑初始化手风琴的代码）。这是来自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

我的编码技能水平处于非常基本的“复制/粘贴/希望它有效”的水平，这是值得的。

4

0 回答 0