Открытие панели аккордеона Bootstrap 4 через URL на другой странице - PullRequest
Новая
       63

Открытие панели аккордеона Bootstrap 4 через URL на другой странице

0 голосов
/ 13 марта 2019

Я потратил около месяца (и выключал), пытаясь найти ответы на этот же вопрос, но безрезультатно.Совсем недавно это: Открытие аккордеонов Bootstrap 4 с использованием URL , но я прошел первые шесть страниц результатов Google по SOF (строка поиска: ссылка на раздел аккордеона с другой страницы начальной загрузки 4).

Я использую Bootstrap Studio для создания сайта.Это позволяет некоторый пользовательский код, и вы можете добавить к нему JavaScripts, но у меня нет доступа ко всем используемым файлам JS и JQuery.

У меня есть: index.html со ссылкой «read more» на about.html.About.html включает в себя аккордеон с четырьмя связанными темами.Я хотел бы, чтобы ссылка «читать дальше» на index.html открывала третью карту в about.html и открывала третью карту.Это часть кода аккордеона;Есть ряд, возможно, лишних идентификаторов и / или классов, потому что я попробовал около 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>

Я перепробовал почти все примеры Bootstrap 4, которые я нашел на SOF, а также: http://foundationphp.com/tutorials/jqui_specific.php (хотя это для более старой версииBootstrap, а также предполагает, что вы можете редактировать код, который инициализирует аккордеон).Это Javascript от foundationphp, который, как я понимаю, не будет работать, потому что он нацелен на панель, а не на карту: 

 <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

Мой уровень навыков кодирования находится на довольно простом уровне "копировать / вставить / надеюсь, что это работает", что бы это ни стоило.

...