<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;/* 其他浏览器 */
}
body {
padding: 20px;
}
ol,
ul {
list-style: none
}
a {
text-decoration: none
}
.title{
margin-bottom: 20px;
}
.site-nav {
width: 100%;
}
.site-nav .site-nav-bd {
/* margin: 0 auto;
width: 1190px; */
/* height: 35px; */
/* background: #f5f5f5; */
/* -webkit-backface-visibility: hidden; */
}
.site-nav .site-nav-bd .site-nav-bd-l {
float: left;
}
.site-nav .site-nav-bd .site-nav-bd-r {
float: right
}
.site-nav .site-nav-menu {
float: left;
margin-right: 2px;
font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(148,158,168,1);
line-height:22px;
}
.site-nav .site-nav-menu:hover {
color:rgba(64,143,252,1);
}
.site-nav .on .site-nav-menu-hd {
width: 100px;
height: 32px;
/* background: rgba(0, 0, 0, 0.02); */
border-radius: 4px 4px 0px 0px;
border: 1px solid rgba(216, 224, 227, 1);
border-bottom: solid #ffffff;
text-align: center;
padding-top: 4px;
z-index: 1;
}
.site-nav .off .site-nav-menu-hd {
width: 100px;
height: 32px;
background: rgba(0, 0, 0, 0.02);
border-radius: 4px 4px 0px 0px;
border: 1px solid rgba(216, 224, 227, 1);
text-align: center;
padding-top: 4px;
}
.site-nav .site-nav-menu .site-nav-menu-hd a {
/* float: left;
margin-right: 7px;
font-size: 12px;
color: #6C6C6C */
}
.site-nav .site-nav-menu .site-nav-menu-hd a span {
width: 56px;
height: 22px;
font-size: 14px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(148, 158, 168, 1);
line-height: 22px;
}
.clear-float {
clear: both;
}
.context {
margin-top: -1px;
width: 100%;
height: 500px;
border: 1px solid rgba(216, 224, 227, 1);
}
.context input[type=button] {
width: 100px;
height: 32px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
border: 1px solid rgba(216, 224, 227, 1);
margin: 25px auto 25px 30px;
}
table {
width: 100%;
text-align: center;
border: 1px solid rgba(223, 229, 231, 1);
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
thead tr{
width: 100%;
height: 46px;
background: rgba(224, 229, 233, 0.4);
}
tr {
border: 1px solid rgba(223, 229, 231, 1);
list-style-type: none;
}
tbody tr:hover {
background: skyblue;
}
td {
height:46px;
border: 0px;
}
.hide {
display: none;
}
/* span{
margin-left: 30px;
} */
.shuaixuan{
margin-left: 30px;
width:42px;
height:20px;
font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(25,31,37,1);
line-height:20px;
}
span input[type=text]{
padding-left:10px;
margin-left: 20px;
width:200px;
height:32px;
background:rgba(255,255,255,1);
border-radius:4px;
border:1px solid rgba(228,234,236,1);
font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(190,199,207,1);
line-height:22px;
}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function() {
var myTab = document.getElementById("site_nav_bd"); //整个div
var myUl = myTab.getElementsByTagName("ul")[0]; //一个节点
var myLi = myUl.getElementsByTagName("li"); //数组
var cc = document.getElementById("cc"); //显示内容
var myDiv = cc.getElementsByTagName("div"); //数组
for (var i = 0; i < myLi.length; i++) {
myLi[i].index = i;
myLi[i].onclick = function() {
for (var j = 0; j < myLi.length; j++) {
myLi[j].className = "site-nav-menu off";
myDiv[j*2].className = "hide";
}
this.className = "site-nav-menu on";
myDiv[this.index*2].className = "show";
}
}
}
</script>
</head>
<body>
<!-- 参数配置
短信模板 语音模板 催收备注模板 风险等级规范
新增
逾期天数 风险等级 管理
未逾期 正常 删除 编辑 -->
<div class="title">参数配置</div>
<div class="cover">
<div class="site-nav">
<div class="site-nav-bd" id="site_nav_bd">
<ul class="site-nav-bd-l">
<li class="site-nav-menu on">
<div class="site-nav-menu-hd"><!-- <a href=""> --><span>模板1</span><!-- </a> --></div>
</li>
<li class="site-nav-menu off">
<div class="site-nav-menu-hd"><!-- <a href=""> --><span>模板2</span><!-- </a> --></div>
</li>
<li class="site-nav-menu off">
<div class="site-nav-menu-hd"><!-- <a href=""> --><span>模板3</span><!-- </a> --></div>
</li>
<li class="site-nav-menu off">
<div class="site-nav-menu-hd"><!-- <a href=""> --><span>模板4</span><!-- </a> --></div>
</li>
</ul>
<ul class="site-nav-bd-r">
</ul>
</div>
</div>
</div>
<div class="clear-float"></div>
<div class="context">
<div id="cc">
<div id="firstPage" class="show" >
<div>
<span class="shuaixuan">筛选:</span>
<span><input type="text" name="" id="" value="" placeholder="选择一"/></span>
<span><input type="text" placeholder="请输入搜索内容关键字"></span>
<span><input type="button" value="搜索"></span>
<span><input type="button" name="" id="" value="+ 新增" /></div></span>
<table>
<thead>
<tr>
<th width="15%">内容1</th>
<th width="15%">内容2</th>
<th>管理</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bill</td>
<td>Gates</td>
<td>1234</td>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
<td>1234</td>
</tr>
</tbody>
</table>
</div>
<div id="secondPage" class="hide" >
<div><input type="button" name="" id="" value="+ 新增" /></div>
<table>
<thead>
<tr>
<th width="15%">内容1</th>
<th width="15%">内容2</th>
<th width="30%">内容3</th>
<th>管理</th>
</tr>
</thead>
<tr>
<td>Bill</td>
<td>Gates</td>
<td>Gates3</td>
<td>1234</td>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
<td>Gates3</td>
<td>1234</td>
</tr>
</table>
</div>
<div id="thirdPage" class="hide" >
<div><input type="button" name="" id="" value="+ 新增" /></div>
<table>
<thead>
<tr >
<th width="33.3%">内容1</th>
<th width="33.3%">内容2</th>
<th >管理</th>
</tr>
</thead>
<tr>
<td>Bill</td>
<td>Gates</td>
<td>1234</td>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
<td>1234</td>
</tr>
</table>
</div>
<div id="fourPage" class="hide" >
<div><input type="button" name="" id="" value="+ 新增" /></div>
<table>
<thead>
<tr>
<th>内容1</th>
<th>内容2</th>
<th>管理</th>
</tr>
</thead>
<tr>
<td>Bill1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</td>
<td>Gates</td>
<td>1234</td>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
<td>1234</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
扫一扫
2326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
