我在页面上有一些标签。当我单击链接时,我想滚动(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');
});
我该怎么做?
答案 0 :(得分:1)
根据我的问题理解,您希望在点击特定标签或用户到达该部分时突出显示该标签。
试试这个内置bootstrap的插件
答案 1 :(得分:0)
好的,不管你信不信,但我在上面的人的帮助下找到了解决方案..
这有什么作用:
$('.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');
});