原文:打造简易可扩展的jQuery/CSS3 Tab菜单

今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图:

由与Tab菜单比较假单,你也可以用CSS代码定制你自己需要的外观。

我们可以在这里看到这款Tab菜单的DEMO演示

看完演示,再来解读一下这款Tab菜单的源代码,主要由CSS代码和jQuery代码两块。

先是上简单的HTML代码:

<figure class="tabBlock">
<ul class="tabBlock-tabs">
<li class="tabBlock-tab is-active">Tab 1</li>
<li class="tabBlock-tab">Tab 2</li>
</ul>
<div class="tabBlock-content">
<div class="tabBlock-pane">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias molestiae atque quis blanditiis eaque maiores ducimus optio neque debitis quos dolorum odit unde quibusdam tenetur quaerat magni eius quod tempore.</p>
</div>
<div class="tabBlock-pane">
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Minima mollitia tenetur nesciunt modi?</li>
<li>Id sint fugit et sapiente.</li>
<li>Nam deleniti libero obcaecati pariatur.</li>
<li>Nemo optio iste labore similique?</li>
</ul>
</div>
</div>
</figure>

这里我们可以看到,Tab菜单的菜单部分用了一个ul li列表,内容部分是普通的div块。

接下来我们来看看CSS代码:

.unstyledList, .tabBlock-tabs {
list-style: none;
margin:;
padding:;
} .tabBlock {
margin: 0 0 2.5rem;
} .tabBlock-tab {
background-color: white;
border-color: #d8d8d8;
border-left-style: solid;
border-top: solid;
border-width: 2px;
color: #b5a8c5;
cursor: pointer;
display: inline-block;
font-weight:;
float: left;
padding: 0.625rem 1.25rem;
position: relative;
-webkit-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
}
.tabBlock-tab:last-of-type {
border-right-style: solid;
}
.tabBlock-tab::before, .tabBlock-tab::after {
content: "";
display: block;
height: 4px;
position: absolute;
-webkit-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
}
.tabBlock-tab::before {
background-color: #b5a8c5;
left: -2px;
right: -2px;
top: -2px;
}
.tabBlock-tab::after {
background-color: transparent;
bottom: -2px;
left:;
right:;
}
@media screen and (min-width: 700px) {
.tabBlock-tab {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
.tabBlock-tab.is-active {
position: relative;
color: #975997;
z-index:;
}
.tabBlock-tab.is-active::before {
background-color: #975997;
}
.tabBlock-tab.is-active::after {
background-color: white;
} .tabBlock-content {
background-color: white;
border: 2px solid #d8d8d8;
padding: 1.25rem;
} .tabBlock-pane > :last-child {
margin-bottom:;
}

这里我们清楚地可以看到,大部分CSS代码非常普通,就是定义了Tab菜单的外观。滑块滑入滑出的效果是利用了CSS3的transition: 0.1s ease-in-out;

然后是切换的动作,这里利用了jQuery代码,也非常简单:

var TabBlock = {
s: {
animLen: 200
}, init: function() {
TabBlock.bindUIActions();
TabBlock.hideInactive();
}, bindUIActions: function() {
$('.tabBlock-tabs').on('click', '.tabBlock-tab', function(){
TabBlock.switchTab($(this));
});
}, hideInactive: function() {
var $tabBlocks = $('.tabBlock'); $tabBlocks.each(function(i) {
var
$tabBlock = $($tabBlocks[i]),
$panes = $tabBlock.find('.tabBlock-pane'),
$activeTab = $tabBlock.find('.tabBlock-tab.is-active'); $panes.hide();
$($panes[$activeTab.index()]).show();
});
}, switchTab: function($tab) {
var $context = $tab.closest('.tabBlock'); if (!$tab.hasClass('is-active')) {
$tab.siblings().removeClass('is-active');
$tab.addClass('is-active'); TabBlock.showPane($tab.index(), $context);
}
}, showPane: function(i, $context) {
var $panes = $context.find('.tabBlock-pane'); $panes.slideUp(TabBlock.s.animLen);
$($panes[i]).slideDown(TabBlock.s.animLen);
}
}; $(function() {
TabBlock.init();
});

很清楚的几个js函数,主要是初始化init()和tab切换switchTab(),利用jQuery实现切换其实也是用jQuery动态改变元素的css class来实现的,没有特别的地方,这样js和css就分离开了,我们只需修改css代码就可以定制自己喜欢的外观了。

最后,分享一下源代码,下载地址>>

打造简易可扩展的jQuery/CSS3 Tab菜单的更多相关文章

  1. 简易版CSS3 Tab菜单 实用的Tab切换

    今天我们要来分享一款非常简易而又实用的CSS3 Tab菜单,Tab菜单没有非常华丽的动画,但是代码非常简洁易懂,也可以在大部分场合使用,因此也非常实用,如果你需要加入动画效果,也可以自己方便地修改这款 ...

  2. 8款超酷实用的CSS3 Tab菜单集合

    1.CSS3华丽的Tab菜单 带小图标动画 之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单,结合SVG,Tab菜单实现非常灵活.今天我们要再来分享一款基于CSS3的 ...

  3. 简易CSS3 Tab菜单 Tab切换滑块动画

    今天要分享一款简易的CSS3 Tab菜单,这款Tab菜单在切换的时候内容块出现飞入飞出的动画效果,尽管看起来非常简单,但是你完全可以在上面定制自己喜欢的Tab菜单.前面也分享过一些Tab菜单,像CSS ...

  4. 8款极具表现力的jQuery/CSS3网页菜单

    上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完美,下面向 ...

  5. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  6. 近20个绚丽实用的jQuery/CSS3侧边栏菜单(转载)

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  7. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

  8. jquery css3 手机菜单动画综合版

    html <header> <a id="go-back" href="javascript:window.location.back(-1)" ...

  9. Vue.js 实现的 3D Tab菜单

    今天给大家带来一款基于VueJS的3D Tab菜单,它跟我们之前分享的许多CSS3 Tab菜单不同的是,它可以随着鼠标移动呈现出3D立体的视觉效果,每个tab页面还可以通过CSS自定义封面照片.它的核 ...

随机推荐

  1. 深度分析 Java 的 ClassLoader 机制(源码级别)(转)

    写在前面:Java中的所有类,必须被装载到jvm中才能运行,这个装载工作是由jvm中的类装载器完成的,类装载器所做的工作实质是把类文件从硬盘读取到内存中,JVM在加载类的时候,都是通过ClassLoa ...

  2. HDU 2063 过山车 二分图题解

    一个男女搭配的关系图,看能够凑成多少对,基本和最原始的一个二分图谜题一样了,就是 一个岛上能够凑成多少对夫妻的问题. 所以是典型的二分图问题. 使用匈牙利算法,写成两个函数,就很清晰了. 本程序还带分 ...

  3. Android使得手机拍照功能的发展(源共享)

    Android系统调用手机拍照功能有两种方法来直接调用手机自带摄像头还有一个就是要当心自己的节拍. 例Camera360 强大的一个在每个操作系统都有一个手机摄影软件:您可以捕捉不同风格,不同特效的照 ...

  4. ajax方式提交带文件上传的表单,上传后不跳转

    ajax方式提交带文件上传的表单 一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦.基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数 ...

  5. Android 开发环境搭建之——ADT-Bundle for Windows

    ADT-Bundle for Windows 是由Google Android官方提供的集成式IDE,已经包含了Eclipse,你无需再去下载Eclipse,并且里面已集成了插件,它解决了大部分新手通 ...

  6. Myeclipse它显示了一个目录的结构,而不是包

    今天Myeclipse新project,编写代码,查找workspace空间展示project在包装和class所有平行结构,看的很不顺,有两个原因,第一,您可能无法切换到Package worksp ...

  7. 构建安全的Xml Web Service系列之wse之证书存储位置

    原文:构建安全的Xml Web Service系列之wse之证书存储位置 我们在前几天对xml web service的安全性提出了一些建议,大家可以通过以下地址访问: 构建安全的Xml Web Se ...

  8. HDU 4067 Random Maze

    意甲冠军: 一个"随机图"它被定义为具有以下性质如: 一个入口和一个出口 有向图 对于入口  出度比入度大1 对于出口  入度比出度大1 对于其它点  入度等于出度 现给出一幅有向 ...

  9. Android Studio如何引用jar包裹(不gradle)

    这和eclipse最大的区别.与非常人的预期开始Android Studio我们很不高兴这一套. 它直接在地图上.首先通过File->Projcet structure打开project结构界面 ...

  10. 允许debian wheezy支持IOS7+的iphone.

    IOS更新, 连接到数据线,不能使用 我想复制iphone照片只能用于内itunes对?  于linux这里面其实很容易处理. 在这里,我们使用了一个相对较新的组件libimobiledevice 为 ...