我在页面中使用 bootstrap nav-tab
来切换数据。在这里,我试图向我的页面添加一些简单的效果。当我单击选项卡时,我需要从左 Angular 到右/从上到下滑动切换选项卡内容。
我尝试过这个,但它不起作用。我做错了什么?或者 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动画
来实现。我创建了一个示例 fiddle 来解释相同的内容。
动画效果:
从下到上
@keyframes slideInFromBottom {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
从左滑动
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
希望这有帮助。
-帮助:)
关于javascript - 如何滑动切换 Bootstrap 导航选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51299027/