一个页面多个页签的实现（css样式）

最新推荐文章于 2022-08-30 10:38:15 发布

编程张知道

最新推荐文章于 2022-08-30 10:38:15 发布

阅读量7k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/fly0744/article/details/19823391

版权

这个示例展示了如何使用CSS来创建一个带有多个页签的页面布局。HTML结构包括一个ID为'tabs'的无序列表，其中包含多个链接页签，每个链接页签对应一个内容区域。通过CSS实现了页签的背景、边框、阴影等样式，并使用JavaScript（jQuery）处理点击事件，以切换显示相应的内容区域。

摘要由CSDN通过智能技术生成

html源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style type="text/css">

#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
float: left;
margin: 0 .5em 0 0;
}
#tabs a {
position: relative;
background: #ddd;

padding: .5em 2.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
}
#tabs a:hover, #tabs a:hover::after, #tabs a:focus, #tabs a:focus::after {