[英]Bootstrap - after clicking link, switch to tab and move to anchor
我要实现的目标:单击链接(在选项卡内)后,切换到另一个选项卡,然后移至页面的特定部分(如锚点)。
我要工作的是在单击链接后切换到选项卡,但是它不会向下滚动到锚点。
非常感谢您的帮助!
码:
<div class="tab-content">
<div class="tab-pane active in" id="A">
<a data-tab-destination="tab-B" href="#bag-in-box">Bag-in-Box</a>
</div>
<div class="tab-pane fade" id="B">
...
<div id="bag-in-box"> <!-- This is where it needs to scroll to -->
<p>Bag-in-Box</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("a[data-tab-destination]").on('click', function(e) {
e.preventDefault();
// Works
var tab = $(this).attr('data-tab-destination');
$("#" + tab).click();
// Doesn't work
var hashtag = $(this.hash);
var target = hashtag.length ? hashtag : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({scrollTop: target.offset().top}, 1000);
return false;
}
});
});
</script>
另一个带有锚标记的选项卡,删除类“ fade”并向其添加类“ active”。
<script type="text/javascript">
$(function() {
$("a[data-tab-destination]").on('click', function(e) {
e.preventDefault();
// Works
var tab = $(this).attr('data-tab-destination');
$("#" + tab).click();
// Doesn't work
var hashtag = $(this.hash);
var target = hashtag.length ? hashtag : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$("#B").removeClass("fade").addClass("active");
$('html, body').animate({scrollTop: target.offset().top}, 1000);
return false;
}
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.