1<?php use Fisharebest\Webtrees\I18N; ?> 2<?php use Fisharebest\Webtrees\View; ?> 3 4<h2 class="wt-page-title"> 5 <?= $title ?> 6</h2> 7 8<div class="wt-page-content wt-chart wt-statistics-chart" id="statistics-tabs"> 9 <ul class="nav nav-tabs" role="tablist"> 10 <?php foreach ($tabs as $label => $url) : ?> 11 <li class="nav-item"> 12 <a class="nav-link" href="#tab-<?= e(md5($url)) ?>" data-toggle="tab" data-href="<?= e($url) ?>" role="tab"> 13 <?= $label ?> 14 </a> 15 </li> 16 <?php endforeach ?> 17 </ul> 18 19 <div class="tab-content"> 20 <?php foreach ($tabs as $label => $url) : ?> 21 <div class="tab-pane fade wt-ajax-load" role="tabpanel" id="tab-<?= e(md5($url)) ?>"></div> 22 <?php endforeach ?> 23 </div> 24</div> 25 26<?php View::push('javascript') ?> 27<script> 28 "use strict"; 29 30 // Bootstrap tabs - load content dynamically using AJAX 31 $('a[data-toggle="tab"][data-href]').on('show.bs.tab', function () { 32 $(this.getAttribute('href') + ':empty').load($(this).data('href')); 33 }); 34 35 // If the URL contains a fragment, then activate the corresponding tab. 36 // Use a prefix on the fragment, to prevent scrolling to the element. 37 var target = window.location.hash.replace("tab-", ""); 38 var tab = $("#statistics-tabs .nav-link[href='" + target + "']"); 39 // If not, then activate the first tab. 40 if (tab.length === 0) { 41 tab = $("#statistics-tabs .nav-link:first"); 42 } 43 tab.tab("show"); 44 45 // If the user selects a tab, update the URL to reflect this 46 $('#statistics-tabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 47 window.location.hash = "tab-" + e.target.href.substring(e.target.href.indexOf('#') + 1); 48 }); 49</script> 50<?php View::endpush() ?> 51