CODEWITHSUNDEEP
jqueryscrolltwitter-bootstrap-3
Meules
Meules

Reputation: 1389

Bootstrap make tab active after scrolling

I have some tabs on a page. When I click a link I want to scroll (smoothscroll.js) to the section with the tabs and then activate that particulary tab. I really can't figure out how to do that! I don't come any further then the stuff I have below!

Any help greatly appreciated.

HTML

<a class="goSmoothly" href="#" data-target="review" onclick="return false">More info</a></span>

   <div class="tab-container left product-detail-tab clearfix">
     <ul class="nav-tabs">
      <li class="active"><a href="#description" data-toggle="tab">Information</a></li>
      <li><a href="#review" data-toggle="tab">Reviews</a></li>
     </ul>
    </div>

   <div class="tab-content clearfix">    
    <div class="tab-pane active" id="description">
      <p>stuff</p>
     </div><!-- End .tab-pane -->
    <div class="tab-pane" id="review">
      <p>stuff</p>
     </div><!-- End .tab-pane -->
   </div>

Jquery

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

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

    $('.active').removeClass('active');
    $(target).closest('.nav-tabs li').addClass('active');
  });

How do I do that?

Upvotes: 0

Views: 3052

Answers (2)

Meules
Meules

Reputation: 1389

Ok, believe it or not but I found a solution with help from people above..

What works is this:

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

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

   $('[href="' + target + '"]').trigger('click');
  });

Upvotes: 0

Yogendra Rawal
Yogendra Rawal

Reputation: 211

For what I understand from your question, you want to highlight a particular tab when it is clicked or when user reach the section.

try this plugin built in bootstrap

http://getbootstrap.com/javascript/#scrollspy

Upvotes: 1

Related Questions