Question

我在页面中使用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>

http://jsfiddle.net/qEjXj/3261/

Answer 1

可以通过css animations获得滑动效果。我创建了一个样本小提琴来解释相同的内容。

Fiddle

动画效果：

从下到上

@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

从左侧滑动

@keyframes slideInFromLeft {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0);
      }
    }

希望这会有所帮助。

-帮助：）

Answer 2

您可以使用点击的索引.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>

如何滑动切换引导导航标签？

2 个答案: