2016-10-20 3 views
0

탭이있는 메뉴가 있으며 탭이있는 메뉴의 페이지 중 하나에 다른 탭이있는 페이지로 이동해야하는 링크가 있습니다.다른 탭이있는 페이지에서 다른 탭이있는 페이지로 스크롤하는 방법은 무엇입니까?

어떻게 하시겠습니까? 나는 매끄러운 두루마리를 시도했다. 그러나 그것은 일하지 않고있다.

JSfiddle

HTML :

<section class="wrapper"> 
<ul class="tabs"> 
    <li class="active"><span class="icons-tabbed icon-icon-tab-locator">Tab 1</span></li> 
    <li><span id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 2</span></li> 
</ul> 
<ul class="tab__content"> 
    <li class="active"> 
     <div id="tab1" class="content__wrapper"> 
     </div> 
    </li> 
    <li> 
     <div class="content__wrapper"> 
      <a href="tab1" data-anchor="#tab1">Link</a> 
       </div> 
     </li> 
    </ul> 
</section> 
+0

곳을 링크? – madalinivascu

+0

@madalinivascu pls 업데이트 된 jsfiddle – User014019

답변

1

다음 클릭 이벤트 시도 :

$('[data-anchor="#tab1"]').on("click", function(e){ 
e.preventDefault(); 
    $(".tabs > li").removeClass("active"); //Remove class from active tab 
    $('.tabs > li:first').addClass("active"); //Add class active to clicked tab 
    clickedTab = $(".tabs .active"); //Update clickedTab variable 
    // fade out active tab 
    activeTab.fadeOut(250, function(){ 
     $(".tab__content > li").removeClass("active"); //Remove active class all tabs 
     var clickedTabIndex = clickedTab.index(); //Get index of clicked tab 
     $(".tab__content > li").eq(clickedTabIndex).addClass("active"); //Add class active to corresponding tab 
     activeTab = $(".tab__content > .active"); //update new active tab 
     activeTabHeight = activeTab.outerHeight(); //Update variable 
     //Animate height of wrapper to new tab height 
     tabWrapper.stop().delay(50).animate({ 
      height: activeTabHeight 
     }, 500, function(){ 
      activeTab.delay(50).fadeIn(250); // Fade in active tab 
     }); 
    }); 
}); 

데모 참조 : 코드가

https://jsfiddle.net/yzpjcm9b/

+0

또는 https://jsfiddle.net/yzpjcm9b/1/ – madalinivascu

+0

이 작동하는지 확인하십시오. 감사! :) – User014019

+0

다른 탭이있는 페이지에 다른 탭이있는 페이지로 이동해야하는 링크가 필요한 경우 어떻게해야합니까? – User014019