페이지를 다시 로드하거나 외부 링크를 통해 부트스트랩 탭으로 직접 이동하는 방법은 무엇입니까?

페이지 새로고침 또는 외부 링크 시 Bootstrap 탭으로 직접 이동

웹 애플리케이션에서 Bootstrap 탭으로 작업할 때 사용자는 다음과 같은 요구 사항에 직면할 수 있습니다. 페이지가 처음 로드되거나 외부 탭에서 클릭할 때 특정 탭으로 직접 이동하려면 링크.

문제:

다음 HTML 코드를 고려하십시오.

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

링크가 해당 홈으로 이동하고 외부에서 클릭 시 메모 탭 페이지.

해결책:

이 기능을 구현하려면 다음 JavaScript 코드를 활용할 수 있습니다.

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

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

이 코드는 다음 작업을 수행합니다. :

• 탭 링크 활성화: 페이지가 로드되면 코드는 URL의 해시 부분(#home 또는 #notes)을 식별하고 탐색 모음에서 해당 탭을 자동으로 활성화합니다.
• 페이지 새로 고침을 위한 해시 변경: 사용자가 탭 사이를 탐색하면 코드는 선택한 탭을 반영하도록 URL의 해시를 업데이트합니다. 이렇게 하면 페이지가 다시 로드될 때 자동으로 올바른 탭으로 이동됩니다.

위 내용은 페이지를 다시 로드하거나 외부 링크를 통해 부트스트랩 탭으로 직접 이동하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!