简易CSS3 Tab菜单切换滑动滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是简易CSS3 Tab菜单切换滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>简易CSS3 Tab菜单切换</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>

  <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>
<figure class="tabBlock">
  <ul class="tabBlock-tabs">
    <li class="tabBlock-tab">Tab 1</li>
    <li class="tabBlock-tab is-active">Tab 2</li>
  </ul>
  <div class="tabBlock-content">
    <div class="tabBlock-pane">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint et accusamus cumque soluta iste quasi ad blanditiis expedita minus quos amet neque illo praesentium nostrum asperiores quisquam atque est repudiandae assumenda ipsum repellat ipsa impedit! Ipsum unde sapiente exercitationem tenetur repellendus nemo harum reiciendis ipsam quo iusto esse temporibus itaque.</p>
    </div>
    <div class="tabBlock-pane">
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem.</li>
        <li>Id atque earum similique repellat nesciunt odio veniam commodi reprehenderit.</li>
        <li>Est placeat voluptatibus id impedit perspiciatis repellat libero sequi rerum?</li>
        <li>Tempora impedit dolorum illum rem fuga voluptas molestias maiores vitae.</li>
        <li>Facilis adipisci vel atque consequuntur mollitia iusto saepe optio placeat.</li>
        <li>Et culpa molestias laboriosam aperiam alias nihil fugit ad illum.</li>
      </ul>
    </div>
  </div>
</figure>
  <script src='js/jquery.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

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');
	// Normally I'd frown at using jQuery over CSS animations,but we can't transition between unspecified variable heights,right? If you know a better way,I'd love a read it in the comments or on Twitter @johndjameson $panes.slideUp(TabBlock.s.animLen);
	$($panes[i]).slideDown(TabBlock.s.animLen);
}
}
;
	$(function(){
	TabBlock.init();
}
);

CSS代码(style.css):

.group::after,.tabBlock-tabs::after{clear:both;content:"";display:table;}
*,::before,::after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{color:#222222;font-family:"Source Sans Pro","Helvetica Neue","Helvetica","Arial",sans-serif;line-height:1.5;margin:0 auto;max-width:50rem;padding:2.5rem 1.25rem;}
@media screen and (min-width:700px){body{font-size:137.5%;}
}
p,ol,ul{margin-bottom:1.25rem;margin-top:0;}
ol,ul{padding:0;margin-left:1.25rem;}
.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;}

附件:下载该文件资源,减少时间成本(增值服务)