JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 打造简易可扩展的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代码就可以定制自己喜欢的外观了。
关键词:CSS教程、HTML5、jQuery

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

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

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

3. 基于 Sass 的强大,可扩展的 CSS 框架

4. HTML5打造简易播放器:Chrome运行.mp3

5. Kickoff - 创造可扩展的,响应式的网站

6. jQuery二级下拉菜单 菜单简易实用

7. jQuery/CSS3实现超酷的动画Tab菜单

8. jQuery/CSS3实现超酷的动画Tab菜单

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

10. Node.js实现网游服务器高性能和可扩展

本文来源:https://www.51html5.com/a1287.html

点击展开全部

﹝打造简易可扩展的jQuery/CSS3 Tab菜单﹞相关内容

「打造简易可扩展的jQuery/CSS3 Tab菜单」相关专题

其它栏目

也许您还喜欢