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

原文:打造简易可扩展的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: 0;
padding: 0;
}

.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: 600;
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: 0;
right: 0;
}
@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: 1;
}
.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: 0;
}

这里我们清楚地可以看到，大部分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代码就可以定制自己喜欢的外观了。

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