0

I have a tabbed menu, and one of the page in tabbed menu has a link that need to go to the another tabbed page.

How to do this? I tried the smooth scroll but it's not working.

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>
User014019
  • 1,215
  • 8
  • 34
  • 66

1 Answers1

1

try the following click event:

$('[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
        });
    });
});

see demo:

https://jsfiddle.net/yzpjcm9b/

madalinivascu
  • 32,064
  • 4
  • 39
  • 55
  • what if I have a different tabbed pages need to have a link that need to go to the different tabbed pages? – User014019 Oct 20 '16 at 10:19
  • then you get the anchor attribute and based on that you toggle the corect tab – madalinivascu Oct 20 '16 at 10:21
  • hi, i tried this when the browser is in a mobile view, I clicked the link, it will go to another page but it only the last part of the page is visible. the user need to scroll up just to view the tab – User014019 Nov 19 '16 at 03:50