您的位置：首页 > 其它

选项卡精简版

2015-09-19 16:13 155 查看 
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="/play/js/jquery-1.8.2.js"></script>
<%--<script type="text/javascript" src="/play/js/user.js"></script>--%>
<script type="text/javascript" >
//切换效果
$(function(){
$('ul li:first').addClass('li_style')
$('.main_content > div:first').show().siblings().hide();
$('ul li').click(function(){
$(this).addClass('li_style').siblings().removeClass('li_style')
var index = $(this).index()
$('.main_content > div:eq('+index+')').show().siblings().hide();
})
})
</script>

<style type="text/css" >
body{font:微软雅黑 ;margin:0px;padding:0px;background:#DCDCDC;}
.top{height:30px;line-height:30px;font:微软雅黑 ;
background:#87CEFA;color:white;text-align:center;
margin:0px;padding:0px;
}
ul{list-style:none;margin:0px;padding:0px;}
ul li{float:left;width:100px;height:30px;line-height:30px;font:12px;border:1px solid #87CEFA;
text-align:center;cursor:pointer;
}
.li_style{background:#CA0E00;color:white;}

.content{margin-left:200px;width:600px;height:400px;padding:0px;}
.menu{margin:0px;padding:0px;}
.main_content{ margin:0px;clear:both;border-top:2px solid #87CEFA;}
table tr td{width:100px;height:30px;line-height:30px;font:12px;}
</style>
</head>

<body>
<div class="top">信息中心
</div>
<div class="content">
<div class="menu">
<ul>
<li>用户信息</li>
<li>商品信息</li>
<li>查询信息</li>
</ul>
</div>
<div class="main_content">
<div class="table">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<input type="hidden" value=""/>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>地址</td>
<td>操作</td>
</tr>
</table>
</div>
<div>商品信息</div><img src="http://img.blog.csdn.net/20150919161326721?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
<div>查询信息</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航