URL을 통해 프로그래밍 방식으로 특정 부트스트랩 탭으로 어떻게 이동합니까?-JS 튜토리얼-php.cn

URL을 통해 프로그래밍 방식으로 특정 부트스트랩 탭으로 어떻게 이동합니까?

Mary-Kate Olsen

풀어 주다： 2024-11-25 19:30:12

원래의

392명이 탐색했습니다.

How Do I Programmatically Navigate to Specific Bootstrap Tabs via URL?

Bootstrap의 특정 탭으로 이동

Bootstrap 탭으로 작업할 때, 외부 소스. 사용자가 외부 링크에서 원하는 탭에 원활하게 액세스할 수 있도록 하려면 불편할 수 있습니다. 이 문제를 해결하는 방법은 다음과 같습니다.

탭에 대한 링크를 직접 활성화하려면 다음 JavaScript 솔루션을 구현하세요.

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

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

로그인 후 복사

이 스크립트가 있는 상태에서 다음과 같은 외부 링크를 클릭하세요.

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

로그인 후 복사

이제 사용자는 각각 홈 탭과 메모 탭으로 바로 이동할 수 있습니다. 또한 페이지 내에서 탭을 선택하면 그에 따라 URL의 해시가 변경되어 페이지를 다시 로드한 후에도 탭 선택이 유지됩니다.

위 내용은 URL을 통해 프로그래밍 방식으로 특정 부트스트랩 탭으로 어떻게 이동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!