Smoothscroll이 클릭시 활성화 된 탭을 가져올 수 없습니다.

Question

내 문제에 대한 여러 가지 해결책을 찾았지만 아무도 작동하지 못합니다. 나는 링크를 클릭하면 탭으로 스크롤을 부드럽게하려고합니다. 그건 완벽하게 작동합니다. 문제는 탭을 가리키는 페이지에 여러 개의 링크가있을 때 탭만 활성화 된 링크 만 작동한다는 것입니다. 따라서 링크를 클릭 할 때 해당 탭이 활성화되어 있지 않으면 링크가 작동하지 않습니다.

그래서 내가하려는 것은 링크를 클릭 할 때 탭을 활성화하는 것입니다.

내가 무엇을 가지고 :

<a class="goSmoothly" href="#" data-target="description" onclick="return false">Link to tab1</a> 
<a class="goSmoothly" href="#" data-target="specs" onclick="return false">Link to tab2</a> 

<ul class="nav-tabs"> 
    <li class="active"><a href="#description" data-toggle="tab">Tab1</a></li> 
    <li><a href="#specs" data-toggle="tab">Tab2</a></li> 
</ul> 


$('.goSmoothly').on('click', function(event) { 
    event.preventDefault(); 
    var target = "#" + $(this).data('target'); 

    $('html, body').animate({ 
     scrollTop: ($(target).offset().top - 150) 
    }, 1200); 

    var self = $(this), className = "active"; 
    self.addClass(className).siblings("."+className).removeClass(className); 
    }); 

Answer 1

문제를이 부분이다 :

귀하의 $(target) 선택하지만, 하나 설명 또는 사양의 id 속성을 가진 요소를 선택하는 것입니다

var target = "#" + $(this).data('target'); 

$('html, body').animate({ 
    scrollTop: ($(target).offset().top - 150) 
}, 1200); 

코드에는 이러한 ID가없는 요소가 있습니다. 또한

var target = $(this).data('target'); 

$('html, body').animate({ 
    scrollTop: ($('[href="' + target + '"]').offset().top - 150) 
}, 1200); 

을하기보다는 전화 :

self.addClass(className).siblings("."+className).removeClass(className); 

을 당신은 간단하게 할 수 있습니다 작동

$('.active').removeClass('active'); 
$(this).addClass('active');