html中制作选项卡(tabs)

快速建立一个html选项卡(tabs)

在网页中常常会看到这样的标签页，其实实现的方法也不难，接下来就介绍如何快速的建立一个html标签卡

 

 

这是我做好的demo预览效果

 

使用的软件以及技术：

1. sublime text 3编辑器
2. html+css
3. jQuery

 

1.建立一个html，并写好基本的结构

如果你使用的是sublime text 3并安装emmet插件，就可以快速创建了：div>(ul>li{Section $}*4)+div*4，然后敲击tab键。

给整体的div添加class为label，给第一个li添加class为showed，给第一个小div添加class为showed，并完善div里的文字内容

 

	

		
Section 1
		
Section 2
		
Section 3
		
Section 4
	
	
This is the first section
	
This is the second section
	
This is the third section
	
This is the fourth section

 

 

2.编写css样式

1. 设定label的大小为宽400，高500，位置和文字都居中。
2. 设定ul的大小为宽400，高50,
3. 设定li的大小为宽100，高50，无头部样式，向左浮动，默认的背景色为灰色，文字为白色上下居中。
4. 设定下面的内容宽400，高50，绝对定位（让四个div重叠），文字为白色，背景为灰黑色，默认隐藏。
5. li标签中的showed类就是现在要展示的标签，突出展示，颜色为灰黑色，顶部有橘色的边框，文字调整高度居中，设置阴影突出立体感。
6. div标签中的showed类就是对应展现的内容了，display改为block显示，并设置阴影突出立体感。

代码如下：

*{
	margin: 0px;
	padding: 0px;
}
.label{
	width: 400px;
	height: 500px;
	margin: 120px auto;
	text-align: center;
}
.label>ul{
	width: 400px;
	height: 50px;
}
.label>ul>li{
	list-style: none;
	float: left;
	width: 100px;
	height: 50px;
	background-color: gray;
	line-height: 50px;
	color: white;
}
.label>div{
	width: 400px;
	height: 500px;
	position: absolute;
	color: white;
	line-height: 70px;
	background-color: #222222;
	display: none;
}
.label li.showed{
	background-color: #222222;
	border-top: 5px solid orange;
	line-height: 40px;
	box-shadow: 5px 5px 20px #333333;
}
.label div.showed{
	display: block;
	box-shadow: 5px 5px 20px #333333;
}

 

 

3.编写js

1. 首先引入jqurey
2. 当鼠标悬停在li标签上时，如果不是showed类的话（不是当前展现的内容），执行以下步骤
3. 将带有showed类的标签去掉showed类
4. 将当前的li添加上showed类
5. 将当前对象li标签在父标签中的位置index()对应的内容div也添上showed类

 

4.完成

这样简单的几个步骤就完成动态的选项卡切换效果，演示在文章的开头，完整的demo文件在百度网盘中。

标签卡Demo.html演示文件：百度网盘 https://pan.baidu.com/s/1bpVwQuV