탭을 한 번 클릭하면 페이지가 아래로 이동합니다.

Question

따라서 사이트 STVPlus에서는 부트 스트랩과 탭 스크립트를 사용하여 다양한 TV 프로그램의 에피소드 및 기사 목록을 표시합니다. 페이지가로드되면 (일반적으로) 제대로 작동하고 탭을 선택하면 해당 div가 표시되는 문제가 있습니다. 그러나 이미 활성화 된 div를 선택하면 페이지가 아래로 이동합니다. 또한 episodes hash tag link과 같은 해시 태그로 페이지를로드하면 페이지가 완전히로드 될 때 자동으로 아래로 이동합니다. 나는 크롬 개발자 도구를 사용하여 JS 코드를 단계별로 시험해 보았지만 아무 것도 발견 할 수 없었다.

도움을 주시면 감사하겠습니다.

샘플 코드 :

$(function() 
{ 
    $('.sidebar').jScrollPane(); 

    // Bind an event to window.onhashchange that, when the hash changes, gets the 
    // hash and adds the class "selected" to any matching nav link. 
    $(window).hashchange(function(){ 
    var hash = location.hash; 


    if (hash == '#episodes'){ 
     //e.preventDefault(); 
     $('.nav-pills a:last').tab('show'); 
    }else{ 
     //e.preventDefault(); 
     $('.nav-pills a:first').tab('show'); 
    } 

    }) 

    // Since the event is only triggered when the hash changes, we need to trigger 
    // the event now, to handle the hash the page may have loaded with. 
    $(window).hashchange(); 
    return false; 
}); 

에피소드는 사업부 컨테이너는 너무

<div class="tab-pane" id="episodes"> ..... </div> 

처럼 당신이 클릭 탭으로, 나는 최신 jQuery를 사용하므로

<ul class="nav nav-pills pull-right" data-tabs="tabs"> 
    <li class="active"><a href="<?php echo current_url(); ?>#articles">Latest Articles</a></li> 
    <li><a href="<?php echo current_url(); ?>#episodes">Upcoming Episodes</a></li> 
    </ul> 

같다 http://benalman.com/projects/jquery-hashchange-plugin/

Answer 1

이것은 내 문제에 관한 나의 접근 방법입니다 :

어떤 경우에는 document.location.hash 폴백 (제외 부분 제외)을 제외하고 hashchange 플러그인이 필요한지 잘 모르겠습니다.

다음 코드는 수동으로 활성화 된 클래식 부트 스트랩 탭과 해시와 일치하는 탭을 표시하는 onready 코드 비트를 사용합니다.

var hasHash = false; 
var hash = document.location.hash; 
if(hash) { 
    hasHash = true; 
    var $toggleTab = $('a[href='+hash+']'); 
    if($toggleTab.length) $toggleTab.tab('show'); 
} 

탭 활성화 다음 HTML을 기반으로

$('.nav > li > a').click(function(event) { 
    event.stopPropagation(); 
    var $this = $(this); 
    $this.tab('show'); 
    if(hasHash) document.location.hash = $this.attr('href'); 
}); 

:

<ul class="nav nav-pills" data-tabs="tabs"> 
    <li class="active"><a href="#articles" data-target="#articles-tab">Latest Articles</a></li> 
    <li><a href="#episodes" data-target="#episodes-tab">Upcoming Episodes</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane" id="episodes-tab">episodes</div> 
    <div class="tab-pane active" id="articles-tab">articles</div> 
</div> 

Demo (jsfiddle) 및 Hash demo (jsfiddle)

Answer 2

이 @Sherbrow의 대답은 나를 위해 작동하지 않았다. 그러나 다음 코드는 :

$('.nav-tabs li a').click(function(e) { 
    history.pushState(null, null, $(this).attr('href')); 
}); 

부트 스트랩 3.2.0에서 테스트되었습니다.

이 코드는 Twitter Bootstrap: How To Prevent Jump When Tabs Are Clicked에서 가져 왔습니다.

Answer 3

이 문제를 해결하는 다른 방법은 탭로드 후 'scrollTop'을 호출하는 것입니다. 나는 이렇게한다 :

$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) { 
    var id = $(e.target).attr("href").substr(1); 
    window.location.hash = id; 
    setTimeout(function() { $("body").scrollTop(0); }, 50); 
});