[英]How to slide toggle bootstrap nav tabs?
我在页面中使用bootstrap nav-tab
来切换数据。 在这里,我试图向页面添加一些简单的效果。当我单击选项卡时,我需要滑动选项卡的内容,从左上角到右上/上到下。
我试过了,但是没有用。 我做错了什么? 否则在angularjs中有什么方法可以做到这一点?
$(document).ready(function() { $(".tt").click(function() { $(".tab-content").slideDown("slow"); }); });
.tab-content div { width: 53%; height: 90px; background: red; padding: 20px; margin: 10px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <h3>Tabs</h3> <ul class="nav nav-tabs"> <li class="active tt"><a data-target="#a" data-toggle="tab">Home</a></li> <li class='tt'><a data-target="#b" data-toggle="tab">Menu 1</a></li> <li class='tt'><a data-target="#c" data-toggle="tab">Menu 2</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="a">text1</div> <div class="tab-pane" id="b">text2</div> <div class="tab-pane" id="c">text3</div> </div> </div>
滑动效果可以通过css animations
来实现。 我创建了一个样本小提琴来解释相同的内容。
动画效果:
从下到上
@keyframes slideInFromBottom {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
从左滑动
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
希望这可以帮助。
-救命 :)
您可以使用单击的.tt
索引,并切换单击的索引的tab-pane
。 这是jQuery方式的示例。
$(document).ready(function() { $(".tt").click(function() { $(".tab-content").find('.tab-pane').not(':eq('+$(this).index()+')').hide('slow'); $(".tab-content").find('.tab-pane').eq($(this).index()).toggle({ direction: "left" }, 2000); }); });
.tab-content div { width: 53%; height: 90px; background: red; padding: 20px; margin: 10px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <h3>Tabs</h3> <ul class="nav nav-tabs"> <li class="active tt"><a data-target="#a" data-toggle="tab">Home</a></li> <li class='tt'><a data-target="#b" data-toggle="tab">Menu 1</a></li> <li class='tt'><a data-target="#c" data-toggle="tab">Menu 2</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="a">text1</div> <div class="tab-pane" id="b">text2</div> <div class="tab-pane" id="c">text3</div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.