|
[tr][td] 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单，这款Tab菜单在切换时也有滑块的效果，先来看看效果图：
图片：104918qwjatmaw4qawa0a3.jpg  由与Tab菜单比较假单，你也可以用CSS代码定制你自己需要的外观。 我们可以在这里看到这款Tab菜单的DEMO演示。 看完演示，再来解读一下这款Tab菜单的源代码，主要由CSS代码和jQuery代码两块。 先是上简单的HTML代码： [*]Tab 1 [*]Tab 2 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. [*]Lorem ipsum dolor sit amet. [*]Minima mollitia tenetur nesciunt modi? [*]Id sint fugit et sapiente. [*]Nam deleniti libero obcaecati pariatur. [*]Nemo optio iste labore similique? 这里我们可以看到，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), $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).slideDown(TabBlock.s.animLen); } }; $(function() { TabBlock.init(); }); 很清楚的几个js函数，主要是初始化init()和tab切换switchTab()，利用jQuery实现切换其实也是用jQuery动态改变元素的css class来实现的，没有特别的地方，这样js和css就分离开了，我们只需修改css代码就可以定制自己喜欢的外观了。 关键词：CSS教程、HTML5、jQuery [/td][/tr] |
|
