Javascript 如何滑动切换引导导航选项卡？

我在页面中使用

引导导航选项卡

切换数据。在这里，我尝试向我的页面添加一些简单的效果。当我单击选项卡时，我需要滑动切换选项卡内容，从左角到右/从上到下

我试过了，但没用。我做错了什么？或者angularjs中有什么方法可以做到这一点

$（文档）.ready（函数（）{
$（“.tt”）。单击（函数（）{
$（“.tab内容”）.slideDown（“慢”）；
});
});
.tab内容div{
宽度：53%；
高度：90px；
背景：红色；
填充：20px；
利润率：10px；
}

标签

主页
菜单1
菜单2

文本1
文本2
文本3
可以通过
css动画实现滑动效果。我制作了一个提琴样本来解释这一点


动画效果：

自下而上

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

从左侧滑动

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

希望这有帮助

-帮助：）
可以通过
css动画实现滑动效果。我制作了一个提琴样本来解释这一点


动画效果：

自下而上

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

从左侧滑动

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

希望这有帮助

-帮助：）
您可以使用已单击的
.tt
的索引，并切换已单击索引的
选项卡窗格。下面是一个jQuery方式的示例


$（文档）.ready（函数（）{
$（“.tt”）。单击（函数（）{
$（“.tab内容”）.find（“.tab窗格”）.not（“：eq（+$（this.index（）+）））.hide（'slow'）；
$（“.tab内容”）.find（“.tab窗格”）.eq（$（this.index（））.toggle（{direction:“left”}，2000）；
});
});
.tab内容div{
宽度：53%；
高度：90px；
背景：红色；
填充：20px；
利润率：10px；
}

标签

主页
菜单1
菜单2

文本1
文本2
文本3
您可以使用已单击的
.tt
的索引，并切换已单击索引的
选项卡窗格。下面是一个jQuery方式的示例


$（文档）.ready（函数（）{
$（“.tt”）。单击（函数（）{
$（“.tab内容”）.find（“.tab窗格”）.not（“：eq（+$（this.index（）+）））.hide（'slow'）；
$（“.tab内容”）.find（“.tab窗格”）.eq（$（this.index（））.toggle（{direction:“left”}，2000）；
});
});
.tab内容div{
宽度：53%；
高度：90px；
背景：红色；
填充：20px；
利润率：10px；
}

标签

主页
菜单1
菜单2

文本1
文本2
文本3
我能从左角拿吗？比如说画矩形？我怎样才能降低速度？太好了！！上一个选项卡右键关闭..我不想显示..我该怎么办it@krish我无法理解。是的，我已经隐藏了上一个标签。我能从左角得到它吗？比如说细化矩形？我怎样才能降低速度？太好了！！上一个选项卡右键关闭..我不想显示..我该怎么办it@krish我无法理解。是的，我已经隐藏了上一个选项卡。我可以从左角获取它吗？像细化矩形吗？抱歉，我看不到任何更改：-（像这样，我只想从左角获取。）请给我一些想法，我可以从左角获取它吗？像细化矩形吗？抱歉，我看不到任何更改：-（像这样，我只想从左角开始.）请给我一些ideas@downvoter你为什么否决我的问题？我可以知道原因吗？@downvoter你为什么否决我的问题？我可以知道原因吗？