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

uchr4 · 发表于 2015-11-18 05:48:00

　　代码很简单，这里不多说什么，请看代码吧：
<!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" onclick="javascript:idnexcls(this);"><a href="#">商品管理</a></li>
<li onclick="javascript:idnexcls(this);"><a href="#">评论管理</a></li>
</ul>
</div>
</body>
</html>效果图预览：

商品管理
评论管理

账号		自动登录	找回密码
密码			立即注册

c++ size_t 和 int 的区别

HERE 使用 AWS EF 和 JFrog Artifactory 打

C++ 指针大全：从基础到进阶，一篇快速上手

wirelessnetview好用的无线分析工具

Red Hat RHCE 8 (EX294) Cert Guide

亿图图示专家(EDraw Max) V7.9 中文破解版

zabbix3.4.1安装部署+微信推送信息+大屏显

[经验分享] PHP开发-CSS实现Tab选项卡功能（附效果图）

浏览过的版块

扫码加入运维网微信交流群