외부 링크를 사용하여 특정 부트스트랩 탭으로 이동하는 방법은 무엇입니까?

외부 하이퍼링크에서 특정 Twitter Bootstrap 탭으로 이동하는 방법

Twitter Bootstrap 탭은 콘텐츠를 별도의 섹션으로 구성하는 편리한 방법을 제공합니다. . 그러나 외부 링크에서 특정 탭에 접근하는 것은 문제가 될 수 있습니다. 이 문서에서는 원하는 탭으로 직접 탐색할 수 있는 솔루션을 안내하면서 이 문제를 다룰 것입니다.

문제 설명

다음 HTML 구조를 고려하세요.

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

외부 페이지에서 클릭하면 이 링크는 지정된 탭('홈' 및 '메모')으로 이동해야 합니다. 각각).

해결책

이 기능을 구현하려면 JavaScript를 사용하세요.

// Enable tab navigation from links
var hash = location.hash.replace(/^#/, '');
if (hash) {
    $('.nav-tabs a[href="#' + hash + '"]').tab('show');
}

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

설명

표시된.bs.tab 이벤트 핸들러는 탭이 활성화될 때 트리거됩니다. 이 핸들러 내에서 현재 활성 탭을 반영하도록 브라우저의 해시를 업데이트합니다. 이렇게 하면 JavaScript를 통해 탭을 탐색할 때 해시가 올바르게 업데이트되어 사용자가 페이지를 다시 로드할 때 원하는 탭에 액세스할 수 있습니다.

위 내용은 외부 링크를 사용하여 특정 부트스트랩 탭으로 이동하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!