jquery实现有过渡效果的tab切换
本文实例为大家分享了jquery实现tab切换的具体代码，供大家参考，具体内容如下
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
.tabBox {
width: 400px;
height: 200px;
border: 1px solid pink;
}
.ul1 {
height: 40px;
border-bottom: 1px solid pink;
}
.ul1 li {
width: 25%;
line-height: 40px;
text-align: center;
float: left;
cursor: pointer;
}
.ul1 li.active {
background-color: pink;
transition: all 0.6s ease-in-out; /* 标题过渡效果 */
}
.ul2 {
overflow: hidden;
}
.ul2 li {
display: none;
}
.ul2 li.selected {
display: block;
}
</style>
</head>
<body>
<div class="tabBox">
<ul class="ul1">
<li class="active">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
<ul class="ul2">
<li class="selected">内容内容1</li>
<li>内容2内容2</li>
<li>内容3内容3</li>
<li>内容4内容4</li>
</ul>
</div>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script>
$(function(){
$(".ul1>li").mouseover(function(){
$(this).addClass("active").siblings("li").removeClass("active");
var index = $(this).index();
$(".ul2>li:eq("+index+")").fadeIn(1000).siblings("li").hide();
})
})
</script>
</body>
</html>
如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总、jquery选项卡操作方法汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍jQuery简单实现tab选项卡切换效果，包括了jQuery简单实现tab选项卡切换效果的使用技巧和注意事项，需要的朋友参考一下 抽空把公司项目上用的tab效果封装了一下，实在是需要用的地方太多了~~~ 效果图： 代码： 以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍jquery移动端TAB触屏切换实现效果，包括了jquery移动端TAB触屏切换实现效果的使用技巧和注意事项，需要的朋友参考一下 我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目，如网易新闻等APP栏目切换。我们说的TAB一般由导航条和TAB对应的内容组成，切换导航条上的标签同时标签对应的内容也会跟着切换。本文将结合实例给大家介绍一个移动端TAB触屏切换效果。 我们准备一个T
-
本文向大家介绍jquery实现的仿天猫侧导航tab切换效果，包括了jquery实现的仿天猫侧导航tab切换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现的仿天猫侧导航tab切换效果。分享给大家供大家参考。具体如下： 这里演示jquery实现仿天猫侧导航tab切换效果，引入外部JS,若初次运行有错误请刷新一页面即可。本菜单是仿天猫商城的菜单，大块的div菜单，支持超多的
-
本文向大家介绍jQuery实现Tab选项卡切换效果简单演示，包括了jQuery实现Tab选项卡切换效果简单演示的使用技巧和注意事项，需要的朋友参考一下 本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示，完全是自己的思考实现过程，分享给大家供大家参考。具体如下： 起初我Html代码架子是这样的： 后来换成了下面这个： 之所以换成这个，是因为我觉得 dl dt dd 在页面布局中用的比
-
本文向大家介绍vue-router之实现导航切换过渡动画效果，包括了vue-router之实现导航切换过渡动画效果的使用技巧和注意事项，需要的朋友参考一下 过渡动效 提供了transition的封装组件，添加过渡动画，通过添加或删除css类名来实现。 过渡的css类名： v-enter 进入过渡的开始状态 v-enter-active 进入活动状态 v-enter-to 进入的结束状态 v-
-
本文向大家介绍Vue.js实现微信过渡动画左右切换效果，包括了Vue.js实现微信过渡动画左右切换效果的使用技巧和注意事项，需要的朋友参考一下 前言 在awesomes上寻找移动端框架的时候意外发现了vux的页面切换效果，后面由于其他考虑没有选用vuex但是这个切换效果确实感觉很有新意，也就看了下源码，这里贴一份备用。 需要用到的技术栈：Vue+Vuex 先看看效果图 过渡动画 示例代码 这里还用