打造简易可扩展的jQuery/CSS3 Tab菜单
2020-11-26 09:53
标签：style blog class code java tar
今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单，这款Tab菜单在切换时也有滑块的效果，先来看看效果图： 由与Tab菜单比较假单，你也可以用CSS代码定制你自己需要的外观。 我们可以在这里看到这款Tab菜单的DEMO演示。 看完演示，再来解读一下这款Tab菜单的源代码，主要由CSS代码和jQuery代码两块。 先是上简单的HTML代码： 这里我们可以看到，Tab菜单的菜单部分用了一个ul li列表，内容部分是普通的div块。 接下来我们来看看CSS代码： 这里我们清楚地可以看到，大部分CSS代码非常普通，就是定义了Tab菜单的外观。滑块滑入滑出的效果是利用了CSS3的transition:
0.1s ease-in-out; 然后是切换的动作，这里利用了jQuery代码，也非常简单： 很清楚的几个js函数，主要是初始化init()和tab切换switchTab()，利用jQuery实现切换其实也是用jQuery动态改变元素的css
class来实现的，没有特别的地方，这样js和css就分离开了，我们只需修改css代码就可以定制自己喜欢的外观了。 最后，分享一下源代码，下载地址>> 打造简易可扩展的jQuery/CSS3 Tab菜单,搜素材,soscw.com 打造简易可扩展的jQuery/CSS3 Tab菜单 标签：style blog class code java tar 原文地址：http://www.cnblogs.com/lonelyxmas/p/3705447.html
figure class="tabBlock">
ul class="tabBlock-tabs">
li class="tabBlock-tab is-active">Tab 1li>
li class="tabBlock-tab">Tab 2li>
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>
.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;
}
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();
});
上一篇：初学JQuery笔记
下一篇：PHP 布尔类型
文章标题：打造简易可扩展的jQuery/CSS3 Tab菜单
文章链接：http://soscw.com/index.php/essay/22618.html