基於jquery 的 Tab
2015-10-20 15:59
633 查看
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet"href="css/font-awesome.css">
<scriptsrc="../js/jquery-1.10.1.min.js"></script>
<style>
.tabs {
border-bottom: 1px solid #d3d3d3;
width: 100%;
}
.tabs ul {
list-style: none;
height: 34px;
margin: 0;
padding: 0 0 0 15px;
}
.tabs ul li {
display: block;
float: left;
border: 1px solid #d3d3d3;
height: 32px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 0 15px;
line-height: 32px;
font-size: 12px;
position: relative;
color: #808080;
background: #efefef;
bottom: -1px;
margin-left: -1px;
}
.tabs ul li.tab-nav:hover {
color: #464646;
background: #eaeaea;
}
.tab-nav {
cursor:pointer;
}
.tabs ul li.tab-nav-action {
border-bottom: 1px solid #efefef;
}
.tabs ul li.tab-nav-action .tab-text {
color: #2d5dcb;
font-weight: bold;
}
.tabs ul li.tab-nav-action i {
color: white;
background: #2d5dcb;
}
.tabs-body {
background:#efefef;
border-bottom: 1px solid #B4C9C6;
border-left:1px solid #B4C9C6;
border-right: 1px solid #B4C9C6;
float: left;
width: 100%;
height:400px;
}
.tab-data {
border: 1pxsolid #d3d3d3;
margin: 0px20px 5px 20px;
background:white;
font-size:12px;
}
.tab-data .formtable {
border-collapse: collapse;
}
.tab-data .formtable th {
font-weight: normal;
padding: 3px 20px;
line-height: 24px;
width: 100px;
background: #fafafa;
border-bottom: 1px solid #efefef;
}
.tab-data .formtable td {
padding: 3px 10px;
border-bottom: 1px solid #efefef;
line-height: 24px;
}
.tabs li .tab-icon {
margin-top:7px;
*display:none;
}
.tabs .tab-nav li:hover .tab-icon i {
background:#9f9f9f;
}
.tabs li .tab-icon i {
color: #FFF;
display:inline-block;
width: 18px;
height:18px;
line-height:18px;
background:#bbbbbb;
text-align:center;
margin-right: 5px;
font-size:12px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".tabs li").bind("click", function () {
var index = $(this).index();
var divs = $(".tabs-body > div.tab-data");
$(this).parent().children("li").removeClass("tab-nav-action").addClass("tab-nav");//将所有选项置为未选中
$(this).addClass("tab-nav-action").removeClass("tab-nav");//设置当前选中项为选中样式
divs.hide();//隐藏所有选中项内容
divs.eq(index).show(); //显示选中项对应内容
});
});
</script>
</head>
<body>
<divclass="tabs">
<ul>
<liclass="tab-nav-action"><spanclass="tab-icon"><i class="fafa-file-text-o"></i></span><spanclass="tab-text">管理导航</span></li>
<liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-file-image-o"></i></span><spanclass="tab-text">系统设置</span></li>
<liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-file-video-o"></i></span><spanclass="tab-text">用户管理</span></li>
<liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-files-o"></i></span><spanclass="tab-text">内容管理</span></li>
<liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-file-o"></i></span><spanclass="tab-text">其他管理</span></li>
<li class="tab-nav"><spanclass="tab-icon"><i class="fafa-volume-up"></i></span><span class="tab-text">内容管理</span></li>
<liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-file-excel-o"></i></span><spanclass="tab-text">其他管理</span></li>
</ul>
</div>
<div class="tabs-body">
<div style="margin: 20px 0px8px 20px; font-size: 12px;">
相关信息：
</div>
<divclass="tab-data">
<tablewidth="100%" border="0" class="formtable">
<tr>
<th>被登记人</th>
<td>
<input name="" type="text" />
</td>
</tr>
<tr>
<th>所属部门</th>
<td>
<select name="">
<option>举报</option>
</select></td>
</tr>
<tr>
<th>事实来源</th>
<td>
<select name="">
<option>请选择</option>
</select></td>
</tr>
<tr>
<th>行为概述</th>
<td>
<input name="" type="text" />
</td>
</tr>
<tr>
<th>登记内容</th>
<td>
<textarea name="" cols="" rows=""style="width: 600px; height: 60px"></textarea></td>
</tr>
</table>
<divstyle="text-align: center; margin: 10px auto;">
<input name="" type="button" value="保存" class="savebtn"
/>
<input name="" type="button" value="取消" class="cancelbtn" />
</div>
</div>
<div class="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i>
功能开发中......
</div>
<div class="tab-data"style="display: none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i>
功能开发中......
</div>
<divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i>
功能开发中......
</div>
<divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist" style="color:#4caf50;font-size:35px;"></i> 功能开发中......
</div>
<divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i>
功能开发中......
</div>
<divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i>
功能开发中......
</div>
<divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i>
功能开发中......
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet"href="css/font-awesome.css">
<scriptsrc="../js/jquery-1.10.1.min.js"></script>
<style>
.tabs {
border-bottom: 1px solid #d3d3d3;
width: 100%;
}
.tabs ul {
list-style: none;
height: 34px;
margin: 0;
padding: 0 0 0 15px;
}
.tabs ul li {
display: block;
float: left;
border: 1px solid #d3d3d3;
height: 32px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 0 15px;
line-height: 32px;
font-size: 12px;
position: relative;
color: #808080;
background: #efefef;
bottom: -1px;
margin-left: -1px;
}
.tabs ul li.tab-nav:hover {
color: #464646;
background: #eaeaea;
}
.tab-nav {
cursor:pointer;
}
.tabs ul li.tab-nav-action {
border-bottom: 1px solid #efefef;
}
.tabs ul li.tab-nav-action .tab-text {
color: #2d5dcb;
font-weight: bold;
}
.tabs ul li.tab-nav-action i {
color: white;
background: #2d5dcb;
}
.tabs-body {
background:#efefef;
border-bottom: 1px solid #B4C9C6;
border-left:1px solid #B4C9C6;
border-right: 1px solid #B4C9C6;
float: left;
width: 100%;
height:400px;
}
.tab-data {
border: 1pxsolid #d3d3d3;
margin: 0px20px 5px 20px;
background:white;
font-size:12px;
}
.tab-data .formtable {
border-collapse: collapse;
}
.tab-data .formtable th {
font-weight: normal;
padding: 3px 20px;
line-height: 24px;
width: 100px;
background: #fafafa;
border-bottom: 1px solid #efefef;
}
.tab-data .formtable td {
padding: 3px 10px;
border-bottom: 1px solid #efefef;
line-height: 24px;
}
.tabs li .tab-icon {
margin-top:7px;
*display:none;
}
.tabs .tab-nav li:hover .tab-icon i {
background:#9f9f9f;
}
.tabs li .tab-icon i {
color: #FFF;
display:inline-block;
width: 18px;
height:18px;
line-height:18px;
background:#bbbbbb;
text-align:center;
margin-right: 5px;
font-size:12px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".tabs li").bind("click", function () {
var index = $(this).index();
var divs = $(".tabs-body > div.tab-data");
$(this).parent().children("li").removeClass("tab-nav-action").addClass("tab-nav");//将所有选项置为未选中
$(this).addClass("tab-nav-action").removeClass("tab-nav");//设置当前选中项为选中样式
divs.hide();//隐藏所有选中项内容
divs.eq(index).show(); //显示选中项对应内容
});
});
</script>
</head>
<body>
<divclass="tabs">
<ul>
<liclass="tab-nav-action"><spanclass="tab-icon"><i class="fafa-file-text-o"></i></span><spanclass="tab-text">管理导航</span></li>
<liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-file-image-o"></i></span><spanclass="tab-text">系统设置</span></li>
<liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-file-video-o"></i></span><spanclass="tab-text">用户管理</span></li>
<liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-files-o"></i></span><spanclass="tab-text">内容管理</span></li>
<liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-file-o"></i></span><spanclass="tab-text">其他管理</span></li>
<li class="tab-nav"><spanclass="tab-icon"><i class="fafa-volume-up"></i></span><span class="tab-text">内容管理</span></li>
<liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-file-excel-o"></i></span><spanclass="tab-text">其他管理</span></li>
</ul>
</div>
<div class="tabs-body">
<div style="margin: 20px 0px8px 20px; font-size: 12px;">
相关信息：
</div>
<divclass="tab-data">
<tablewidth="100%" border="0" class="formtable">
<tr>
<th>被登记人</th>
<td>
<input name="" type="text" />
</td>
</tr>
<tr>
<th>所属部门</th>
<td>
<select name="">
<option>举报</option>
</select></td>
</tr>
<tr>
<th>事实来源</th>
<td>
<select name="">
<option>请选择</option>
</select></td>
</tr>
<tr>
<th>行为概述</th>
<td>
<input name="" type="text" />
</td>
</tr>
<tr>
<th>登记内容</th>
<td>
<textarea name="" cols="" rows=""style="width: 600px; height: 60px"></textarea></td>
</tr>
</table>
<divstyle="text-align: center; margin: 10px auto;">
<input name="" type="button" value="保存" class="savebtn"
/>
<input name="" type="button" value="取消" class="cancelbtn" />
</div>
</div>
<div class="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i>
功能开发中......
</div>
<div class="tab-data"style="display: none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i>
功能开发中......
</div>
<divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i>
功能开发中......
</div>
<divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist" style="color:#4caf50;font-size:35px;"></i> 功能开发中......
</div>
<divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i>
功能开发中......
</div>
<divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i>
功能开发中......
</div>
<divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
<i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i>
功能开发中......
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery搜索子元素的方法教程
- jQuery搜索同辈元素方法
- Jquery搜索父元素操作方法
- jQuery子属性过滤选择器
- jQuery内容过滤选择器
- jQuery过滤选择器
- jQuery层级选择器
- jQuery获取Select选择的Text和 Value(转)
- Web前端之jQuery 的10大操作技巧
- json jquery 解析
- JQuery Ajax学习
- 人人必知的10个 jQuery 小技巧
- jquery的验证器和spring mvc的验证器
- Jquery判断checkbox是否被选中
- 基于jQuery实现的扇形定时器附源码下载
- jQuery 中bind(),live(),delegate(),on() 区别
- 浅谈jQuery事件源码定位问题
- jQuery 获取屏幕高度、宽度
- [转]Jquery中AJAX错误信息调试参考
- jQuery unbind 删除绑定事件 / 移除标签方法