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

本文主要是介绍PHP开发-CSS实现Tab选项卡功能（附效果图），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

<!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>

效果图预览：