jQuery+CSS写的tab选项卡

先给大家看一下效果图：

html+jQuery代码：

<div class="tab">
	<ul class="tab-list">
		<li>
			<a class="current" href="">tab1选项卡</a>
		</li>
		<li>
			<a href="">tab2选项卡</a>
		</li>
	</ul>
	<div class="tab-content">
		<div class="tab-group tab-group-show">
			tab1选项卡内容
		</div>
		<div class="tab-group">
			tab2选项卡内容
		</div>
	</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
    $(document).ready(function(){
      $('.tab-list a').each(function(i){
        $(this).click(function(){
          $('.tab-list a').removeClass('current').eq(i).addClass('current');
          $('.tab-group').hide().eq(i).show();
          return false;
        })
      })
    })
</script>

CSS代码：

 ul {
 	margin: 0;
 	padding: 0;
 }
 
 li {
 	list-style: none;
 }
 
 a {
 	text-decoration: none;
 	color: #333;
 }
 
 .tab {
 	width: 100%;
 }
 
 .tab-list {
 	display: flex;
	border-bottom: 2px solid #ccc;
 }
 
 .tab-list li {
 	flex:1;
 	text-align: center;
	font-size: 1.3rem;
	height: 3rem;
 	line-height: 3rem;
 }
 
 .tab-list .current {
 	color: #ff5400; 	
 	font-weight: bold;
 	border-bottom: 2px solid #ff5400;
 	display: block;
 }
 
 .tab-group {
 	padding: 40px 20px;
 	display: none;
 }
 
 .tab-group-show {
 	display: block;
 }

注意：css部分代码需要根据需求自己稍微调整，我上面使用的是自适应的rem单位。

本文链接：https://blog.csdn.net/qq15577969/article/details/103109452

智能推荐

Reflect反射的基础知识

写个父类：写个子类：利用反射获得该子类中的属性，方法，构造，父类及接口：运行结果：...

spring cloud netflix (07) 服务的消费者(feign)

前言完整知识点：spring cloud netflix 系列技术栈 Feign (同步通信 HTTP通信) feign是基于接口完成服务与服务之间的通信的搭建Feign服务项目结构项目搭建 pom.xml application类 application.yml 使用feign完成服务与服务之间的通信 feign是基于接口完成服务与服务之间的通信的...

AtCoder Beginner Contest 174 E.Logs

AtCoder Beginner Contest 174 E.Logs 题目链接到最后才发现是二分，菜菜的我/(ㄒoㄒ)/~~ 我们直接二分 [1,max{a[i]}][1,max\lbrace a[i]\rbrace][1,max{a[i]}] 即可，对每一个 midmidmid，每个数 a[i]a[i]a[i] 只需要切 a[i]−1mid\frac{a[i]-1}{mid}mi...

小程序基础与实战案例

小程序开发工具与基础小程序开发准备：申请小程序账号（ appid ）下载并安装微信开发者工具具体步骤如下：先进入微信公众平台，下拉页面，把鼠标悬浮在小程序图标上然后点击小程序开发文档照着里面给的步骤，就可以申请到小程序账号了。然后就可以下载开发者工具了下载完打开后的界面就是这个样子下面让我们来新建一个小程序开发项目：在AppID输入自己刚刚注册的AppID就可以，或...

VMware centOS7 下通过minikube部署Kubernetes

1、环境准备： VMware CentOS-7-x86_64 CPU：2*2core 内存：8G 宿主机和虚拟机需网络互通，虚拟机外网访问正常 Centos发行版版本查看：cat /etc/centos-release root用户操作 2、禁用swap分区 Kubernetes 1.8开始要求关闭系统的Swap，可暂时关闭或永久禁用，使用 $ free -m 确认swap是否为开启状态 $ s...