Question

我在页面上有一些标签。当我单击链接时，我想滚动（smoothscroll.js）到带有选项卡的部分，然后激活该特定选项卡。我真的无法弄清楚如何做到这一点！我不会再进一步了解下面的内容！

任何帮助非常感谢。

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

我该怎么做？

Answer 1

根据我的问题理解，您希望在点击特定标签或用户到达该部分时突出显示该标签。

试试这个内置bootstrap的插件

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

Answer 2

好的，不管你信不信，但我在上面的人的帮助下找到了解决方案..

这有什么作用：

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

滚动后，Bootstrap make tab处于活动状态

2 个答案: