<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签页</title>
<style>
html,body {
height: 100%;
overflow: hidden;
}
/*项目详情盒子*/
.project-detail-wrap {
height: 80%;
overflow: hidden;
box-sizing: border-box;
border: 1px solid #ddd;
}
.project-detail-wrap *{
margin: 0;
padding: 0;
list-style: none;
}
/*标签页导航*/
ul.project-nav {
height: 40px;
border-bottom: 1px solid #ddd;
}
ul.project-nav li {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
margin-left: -1px;
}
ul.project-nav li.on {
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #fff;
color: #0A5FE0;
background-color: #fff;
}
/*主要内容*/
.project-detail {
padding: 20px;
box-sizing: border-box;
clear: both;
height: 100%;
/*overflow-y: scroll;*/
background-color: #fff;
}
.detail-item {
display: none;
height: 100%;
}
div.active {
background-color: #ffffff;
display: block;
}
.text-bold{
font-weight: bold;
font-size: 16px;
}
/*基本信息*/
#base_info {
}
.base-1 ul {
float: left;
}
.base-1 ul:nth-child(1){
width: 110px;
}
.base-1 ul:nth-child(2){
width: 35%;
}
.base-1 ul:nth-child(3){
width: 110px;
}
.base-1 ul:nth-child(4){
width: 35%;
}
.base-1 ul li {
height: 30px;
line-height: 30px;
}
.base-1 ul:nth-child(1) li,
.base-1 ul:nth-child(3) li{
color: #adadad;
padding-right: 10px;
text-align: right;
}
/*项目相关*/
.project-content {
padding-left: 20px;
}
.project-content table {
border-collapse: collapse; /*线合并*/
border-spacing: 0; /* 可以不写 */
}
.project-content table tr {
border-bottom: 1px solid #efefef;
}
.project-content table tr td{
height: 40px;
width: 200px;
}
.project-content table tr:nth-child(1) td{
color: #adadad;
}
</style>
</head>
<body>
<div class="project-detail-wrap">
<ul id="project_nav" class="project-nav">
<li data-active="1" class="on">AAAAA</li>
<li data-active="2">BBBBB</li>
<li data-active="3">CCCCC</li>
</ul>
<div class="project-detail">
<div id="detail-item1" class="detail-item active">
<section>
<div id="base_info" class="text-bold">AAAA</div>
<div class="base-1">
<ul>
<li>xxxx:</li>
<li>xxxx:</li>
<li>xxxx:</li>
<li>xxxx:</li>
<li>xxxx:</li>
<li>xxxx:</li>
<li>xxxx:</li>
</ul>
<ul>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
</ul>
<ul>
<li>xxxx:</li>
<li>xxxx:</li>
<li>xxxx:</li>
<li>xxxx:</li>
<li>xxxx:</li>
<li>xxxx:</li>
</ul>
<ul>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
</ul>
</div>
</section>
<section style="clear: both">
<div id="relevent_project" class="text-bold">AAAA</div>
<div class="project-content">
<table>
<tr>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
</tr>
<tr>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
</table>
</div>
</section>
</div>
<div id="detail-item2" class="detail-item">222</div>
<div id="detail-item3" class="detail-item">333</div>
</div>
</div>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
// 入口函数，模块化中可以不用写入口函数
$('#project_nav').on('click','li',function (event) {
var $this = $(this);
$('#project_nav li').each(function (index, item) {
$(item).removeClass('on');
})
$this.addClass('on');
switch ($this.data('active')){
case 1:
_removeClass();
$('#detail-item1').addClass('active');
break;
case 2:
_removeClass();
$('#detail-item2').addClass('active');
break;
case 3:
_removeClass();
$('#detail-item3').addClass('active');
break;
}
})
function _removeClass() {
$('.detail-item').removeClass('active');
}
});
</script>
</body>
</html>
网友评论