.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;
}

由与Tab菜单比较假单,你也得以用CSS代码定制你自身索要的外观。

图片 1

末尾,分享一下源代码,下载地址>>

大家能够在此间看到这款Tab菜单的DEMO演示

很领会的多少个js函数,主即便早先化init()和tab切换switchTab(),利用jQuery完成切换其实也是用jQuery动态改变元素的css
class来完成的,没有特意的地点,那样js和css就分开开了,大家只需修改css代码就足以定制自个儿喜好的外观了。

明天大家选取jQuery和CSS3来制作一款简单而且扩大性强的Tab菜单,这款Tab菜单在切换时也有滑块的成效,先来探视效果图:

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();
});

接下去大家来看望CSS代码:

<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>

那里咱们明白地得以见见,超过十分之五CSS代码异常平时,正是概念了Tab菜单的外观。滑块滑入滑出的成效是应用了CSS3的transition: 0.1s ease-in-out;

看完演示,再来解读一下那款Tab菜单的源代码,首要由CSS代码和jQuery代码两块。

接下来是切换的动作,那里运用了jQuery代码,也十三分简单:

率先上海高校概的HTML代码:

那边大家得以见到,Tab菜单的菜谱部分用了多少个ul
li列表,内容部分是惯常的div块。

相关文章

网站地图xml地图