부트스트랩 4 - 특정 탭 링크

부트스트랩 4 - 특정 탭 링크

워드프레스 웹사이트에 부트스트랩 4 탭이 설정되어 있고 다른 페이지 링크에서 특정 탭으로 연결하고 싶습니다.

Index.php:

<a href="<?php echo get_site_url(); ?>/services/#innovation">Discover More</a>

서비스.php:

<!-- Nav tabs -->
            <ul class="nav nav-tabs text-xs-center" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#innovation" role="tab" aria-expanded="true">
                        <h4>Innovation &<br/>Investigation</h4>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#electronic-engineering" role="tab" aria-expanded="false">
                        <h4>Electronic<br/>Engineering</h4>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link manufacturing" data-toggle="tab" href="#manufacturing" role="tab" aria-expanded="false">
                        <h4>Manufacturing</h4>
                    </a>
                </li>
            </ul>

<!-- Tab panes -->
            <div class="tab-content clearfix">

                <!-- Innovation -->
                <div class="tab-pane active" id="innovation" role="tabpanel" aria-expanded="true">
                    <div data-aos="fade" data-aos-duration="2000" class="col-sm-5">
                        Content
                    </div>
                </div>

                <!-- Electronic Engineering -->
                <div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="electronic-engineering" role="tabpanel" aria-expanded="false">
                    <div class="col-sm-5">
                        Content
                    </div>
                </div>

                <!-- Manufacturing -->
                <div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="manufacturing" role="tabpanel" aria-expanded="false">
                    <div class="col-sm-5">
                        Content
                    </div>
                </div>
            </div>

자바스크립트:

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show');
} //add a suffix

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})

이 솔루션을 사용해 보았지만 성공하지 못했습니다. - Twitter 부트스트랩 탭: 페이지 다시 로드 또는 하이퍼링크의 특정 탭으로 이동

감사해요.

다음과 같은 것을 추천합니다. / pushState를 사용합니다. 그렇지 않으면 브라우저가 ID로 스크롤합니다.

$(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    history.pushState({}, '', e.target.hash);
  });

  var hash = document.location.hash;
  var prefix = "tab_";
  if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
  }
});

그것은 당신이 부착해야 하기 때문에 작동하지 않습니다.shown.bs.tab호출하기 전에 핸들러.tab('show')페이지 로드 중에

// wire up shown event
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    console.log("tab shown...");
});

// read hash from page load and change tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
} 

부트스트랩 4 - 페이지 로드의 활성 탭

코드 : http://www.codeply.com/go/Yu8wbjeGMZ
데모: http://www.codeply.com/render/Yu8wbjeGMZ#tab2

여기가 제가 부트스트랩 4로 착륙한 곳입니다.해시가 앵커(href) 태그의 ID인지 확인하면 됩니다.

$(function() {
    $(document.location.hash).tab('show');
});

언급URL : https://stackoverflow.com/questions/43068221/bootstrap-4-link-to-specific-tab