今日在防站项目中遇到某一个模块需要制作Tab点击式的切换菜单栏,通过Js或者jQuery比较容易实现,可是实在是不懂Js,所以寻求通过CSS实现,其实用CSS也有几种方式可以实现Tab菜单栏切换效果,在百度里搜索了我认为是最简单的方法,一种纯CSS3制作Tab切换菜单栏,具体实现代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tab切换栏</title>
<style>
/*清除浏览器内外边距*/
*{
margin: 0;
padding: 0;
}
/*清除li前面小圆点*/
ul li{
list-style: none;
}
/*清除a标签下划线,并将字体颜色设置为红色*/
a{
text-decoration: none;