외부 링크를 사용하여 특정 부트스트랩 탭을 대상으로 지정하고 다시 로드 시 선택 항목을 유지하려면 어떻게 해야 합니까?

외부 링크로 특정 Bootstrap 탭 타겟팅

쿼리:

클릭할 때 특정 Bootstrap 탭으로 어떻게 이동합니까? 외부 링크에서 원하는 탭이 페이지에서 활성 상태로 유지되도록 합니다. 다시 로드하시겠습니까?

답변:

이 기능을 구현하려면 다음 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;
})

설명:

1. 찾기 해시: 현재 URL에서 해시("#" 다음 부분)를 검색합니다.
2. 탭 활성화: 해시와 일치하는 탭 링크를 검색하고 다음으로 전환합니다. show.
3. 다시 로드 시 해시 보존: 탭이 표시될 때 URL 해시 업데이트 페이지를 다시 로드해도 활성 상태를 유지합니다.

위 내용은 외부 링크를 사용하여 특정 부트스트랩 탭을 대상으로 지정하고 다시 로드 시 선택 항목을 유지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!