【网页开发】简易css3实现Tab菜单切换

小卓仗剑走天涯

已于 2023-02-01 15:50:45 修改

阅读量1.2k

点赞数 3

分类专栏：网页开发文章标签： css3 css html

于 2022-09-09 09:25:37 首次发布

本文链接：https://blog.youkuaiyun.com/m0_66345324/article/details/126776074

版权

网页开发专栏收录该内容

3 篇文章

订阅专栏

简易css3实现Tab菜单切换

因为经常会用到这个Tab菜单切换这个功能，特地记录下来，先看效果图，再决定用不用。
在这里插入图片描述

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>
	
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="js/index.js"></script>
</body>
</html>

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

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