PHP开发-CSS实现Tab选项卡功能（附效果图）

最新推荐文章于 2021-04-14 02:54:20 发布

tangcheng_ok

最新推荐文章于 2021-04-14 02:54:20 发布

阅读量6k

点赞数 1

分类专栏： PHP开发

本文链接：https://blog.csdn.net/tangcheng_ok/article/details/17239359

版权

PHP开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

代码很简单，这里不多说什么，请看代码吧：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function idnexcls(id){
	$(".active").removeClass();
	$(id).attr("class","active");
}
</script>
<style>

ul.tabnav li {
	float: left;
	display: inline;
	margin-left: 8px;
}

ul.tabnav li {
	float: left;
	display: inline;
	margin-left: 8px;
}

.tabnav li a {
	background-color: #BDC2BD;
	border: 1px solid #aaa;
	color: #666;
	display: block;
	padding: 0 5px;
	line-height: 20px;
	float: left;
	font-weight: bold;
}

.tabnav .active a{
	background-color: #fff;
	border-bottom: 1px solid #fff;
}
.tabnav li a:hover {
	background-color: #fff;
	border-bottom: 1px solid #fff;
	_position: relative;
}

.nav{
	margin-top: 20px;
	padding-bottom: 20px;
}

.nav .tabnav {
	border-bottom: 1px solid #aaa;
	height: 21px;
	_overflow: hidden;
}
</style>
</head>
<body>
<div class="nav">
	<ul class="tabnav">
		<li  class="active" οnclick="javascript:idnexcls(this);"><a href="#">商品管理</a></li>
		<li οnclick="javascript:idnexcls(this);"><a href="#">评论管理</a></li>
	</ul>
</div>
</body>
</html>

效果图预览：

tangcheng_ok

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PHP开发-CSS实现Tab选项卡功能（附效果图）

ul.tabnav li { float: left; display: inline; margin-left: 8px;}ul.tabnav li { float: left; display: inline; margin-left: 8px;}.tabnav li a { background-color: #BDC2BD; border: 1px solid
复制链接

扫一扫