외부 링크에서 또는 페이지 새로 고침 후에 특정 부트스트랩 탭으로 어떻게 이동할 수 있습니까?

외부 링크 또는 페이지 새로 고침에서 Twitter 부트스트랩 탭 탐색

Twitter의 부트스트랩 탭을 웹 페이지에 통합할 때 외부 링크에서 특정 탭으로 직접 이동하거나 페이지를 다시 로드할 때 어려울 수 있습니다. 이 기사에서는 탭 간을 원활하게 전환할 수 있는 솔루션에 대해 자세히 설명합니다.

문제 배경

부트스트랩 탭을 활용하는 Facility.php라는 페이지가 있고 특정 탭으로 이동하려고 한다고 가정합니다. 외부 페이지에서. 예를 들어, 다음 링크를 클릭하면

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

각각 홈 탭과 메모 탭으로 연결됩니다. 그러나 외부 페이지에서 직접 탐색할 때는 이러한 전환이 발생하지 않습니다.

해결 방법

이 문제를 해결하기 위해 다음 JavaScript 코드를 사용합니다.

// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hash
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;
})

자 솔루션의 각 부분을 검토하십시오.

• 현재 정보 얻기 탭: 코드의 첫 번째 부분(hash = location.hash.replace(/^#/, ''))은 URL에서 현재 탭의 조각 식별자(#home 또는 #notes)를 검색합니다.
• 원하는 탭 활성화: 그런 다음 .nav-tabs a[href="hash"]를 사용하여 조각 식별자에 해당하는 탭 요소를 선택합니다. 마지막으로 .tab('show')를 사용하여 선택한 탭을 활성화합니다.
• 페이지 새로고침 시 URL 업데이트: 코드의 두 번째 부분(window.location.hash = e .target.hash)는 페이지를 새로 고칠 때 활성화된 탭과 일치하도록 URL의 조각 식별자를 업데이트합니다. 이렇게 하면 페이지를 다시 로드한 후에도 현재 탭이 유지됩니다.

이 솔루션을 사용하면 이제 외부 링크에서 또는 페이지 새로 고침 시 특정 Bootstrap 탭으로 편리하게 직접 이동할 수 있어 사용자 경험이 향상됩니다.

위 내용은 외부 링크에서 또는 페이지 새로 고침 후에 특정 부트스트랩 탭으로 어떻게 이동할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!