Twitter의 Bootstrap Framework 및 해당 Bootstrap Tabs JS를 사용하는 웹 페이지를 개발 중 입니다. 몇 가지 사소한 문제를 제외하고는 효과적입니다. 그 중 하나는 외부 링크에서 특정 탭으로 직접 이동하는 방법을 모릅니다. 예를 들면 다음과 같습니다.
<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>외부 페이지에서 링크를 클릭하면 홈 탭과 메모 탭으로 각각 이동해야 합니다.
답변
여기에 문제에 대한 해결책이 있습니다. 그러나 그것은 다른 사람들을 도울 수 있습니다.
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})답변
최신 정보
부트 스트랩 3의 변경 .on('shown', ...)에.on('shown.bs.tab', ....)
이것은 @dubbe 답변과 SO 수락 답변을 기반으로합니다 . window.scrollTo(0,0)제대로 작동하지 않는 문제를 처리 합니다. 문제는 표시된 탭에서 URL 해시를 교체하면 브라우저가 페이지의 요소이기 때문에 해당 해시로 스크롤한다는 것입니다. 이 문제를 해결하려면 해시가 실제 페이지 요소를 참조하지 않도록 접두사를 추가하십시오.
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});사용 예
id = “mytab”인 탭 패널이있는 경우 다음과 같이 링크를 추가해야합니다.
<a href="yoursite.com/#tab_mytab">Go to Specific Tab </a>답변
click해당 탭 링크 에서 이벤트를 트리거 할 수 있습니다 .
$(document).ready(function(){
if(window.location.hash != "") {
$('a[href="' + window.location.hash + '"]').click()
}
});답변
이것은 스크롤링을 방지하는 dubbe 솔루션의 개선 된 구현입니다.
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
}
// With HTML5 history API, we can easily prevent scrolling!
$('.nav-tabs a').on('shown.bs.tab', function (e) {
if(history.pushState) {
history.pushState(null, null, e.target.hash);
} else {
window.location.hash = e.target.hash; //Polyfill for old browsers
}
})답변
제공된 JavaScript 솔루션이 작동 할 수 있지만 추가 JavaScript는 필요하지 않지만 약간의 관점에서는 논리가 필요합니다. 다음과 같은 표준 URL 매개 변수를 사용하여 링크를 작성하십시오.
<a href = "http://link.to.yourpage?activeTab=home">My Link</a>그런 다음 activeTab의 값을 감지하여 적절한 ‘class = “active”‘를 작성하십시오. <li>
의사 코드 (귀하의 언어로 구현). 참고이 예에서 매개 변수가 제공되지 않은 경우 ‘홈’탭을 기본 활성으로 설정했습니다.
$activetabhome = (params.activeTab is null or params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';
<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>답변
나는 if … else의 큰 팬이 아니다. 더 간단한 접근 방식을 취했습니다.
$(document).ready(function(event) {
$('ul.nav.nav-tabs a:first').tab('show'); // Select first tab
$('ul.nav.nav-tabs a[href="'+ window.location.hash+ '"]').tab('show'); // Select tab by name if provided in location hash
$('ul.nav.nav-tabs a[data-toggle="tab"]').on('shown', function (event) { // Update the location hash to current tab
window.location.hash= event.target.hash;
})
});- 기본 탭을 선택하십시오 (일반적으로 첫 번째 탭).
- 탭으로 전환하십시오 (이러한 요소가있는 경우 jQuery가 처리하도록하십시오). 잘못된 해시가 지정되면 아무 일도 일어나지 않습니다
- [선택 사항] 다른 탭을 수동으로 선택한 경우 해시 업데이트
요청 된 해시로 스크롤을 처리하지 않습니다. 하지만 그래야 합니까?
답변
부트 스트랩 3의 경우 :
$('.nav-tabs a[href="#' + tabID + '"]').tab('show');