在html中选项卡怎么做,html中制作选项卡(tabs)

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

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

这是我做好的demo预览效果

使用的软件以及技术&＃xff1a;

sublime text 3编辑器

html&＃43;css

jQuery

1.建立一个html&＃xff0c;并写好基本的结构

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

给整体的div添加class为label&＃xff0c;给第一个li添加class为showed&＃xff0c;给第一个小div添加class为showed&＃xff0c;并完善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样式

设定label的大小为宽400&＃xff0c;高500&＃xff0c;位置和文字都居中。

设定ul的大小为宽400&＃xff0c;高50,

设定li的大小为宽100&＃xff0c;高50&＃xff0c;无头部样式&＃xff0c;向左浮动&＃xff0c;默认的背景色为灰色&＃xff0c;文字为白色上下居中。

设定下面的内容宽400&＃xff0c;高50&＃xff0c;绝对定位(让四个div重叠)&＃xff0c;文字为白色&＃xff0c;背景为灰黑色&＃xff0c;默认隐藏。

li标签中的showed类就是现在要展示的标签&＃xff0c;突出展示&＃xff0c;颜色为灰黑色&＃xff0c;顶部有橘色的边框&＃xff0c;文字调整高度居中&＃xff0c;设置阴影突出立体感。

div标签中的showed类就是对应展现的内容了&＃xff0c;display改为block显示&＃xff0c;并设置阴影突出立体感。

代码如下&＃xff1a;

*{

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

首先引入jqurey

当鼠标悬停在li标签上时&＃xff0c;如果不是showed类的话(不是当前展现的内容)&＃xff0c;执行以下步骤

将带有showed类的标签去掉showed类

将当前的li添加上showed类

将当前对象li标签在父标签中的位置index()对应的内容div也添上showed类

4.完成

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

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