打造简易可扩展的jQuery/CSS3 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代码就可以定制自己喜欢的外观了。
关键词:CSS教程、HTML5、jQuery
【打造简易可扩展的jQuery/CSS3 Tab菜单】相关文章
本文来源:https://www.51html5.com/a1033.html
﹝打造简易可扩展的jQuery/CSS3 Tab菜单﹞相关内容
- jQuery实现的简易日历控件
- 7款很酷的JQuery动画和实用的JQuery应用
- Cufon, jQuery和CSS3实现的超强飞出菜单
- Cufon, jQuery和CSS3实现的超强飞出菜单
- 分享Jquery+CSS3实现的3D下拉菜单特效
- CSS3+ jQuery创建手风琴菜单
- 一款基于jquery和css3的响应式二级导航菜单
- 使用 jQuery 和 CSS3 制作滑动导航菜单
- 26款免费CSS3导航菜单及jQuery插件
- 分享5个超酷flash样式的jQuery导航和菜单