您的位置：首页 > Web前端 > JavaScript

frameset在jsp页面制作导航栏详解

2018-02-14 21:49 417 查看

main.jsp<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>电子商务后台管理页面</title>

<frameset rows="14%,84%">
<frame src="${pageContext.request.contextPath}/jsp/top/top.jsp"> //头部的jsp文件
<frameset cols="15%,75%">
<frame src="${pageContext.request.contextPath}/jsp/left.jsp"> //左边的jsp文件
<frame src="${pageContext.request.contextPath}/jsp/right/selectall.jsp" name="rightframe"> //右边的jsp页面
</frameset>
</frameset>
</head>
left.jsp                         <ul class="mList">
                        <li>
<h3><span>+</span>用户管理</h3>
<dl>
<dd><a href="right/yonghu.jsp" target ="rightframe">用户列表</a></dd>
</dl>
</li></ul>

selectall.jsp 是默认显示的页面,当你不点击左边的导航栏自动显示内容.

<div class="title">产品管理</div>
<div class="details">
<div class="details_operation clearfix">
<div class="bui_select">
<input type="button" value="添  加" class="add">
</div>
<div class="fr">
<div class="text">
<span>商品名称：</span>
<div class="bui_select">
<select name="" id="" class="select">
<option value="1">测试内容</option>
<option value="1">测试内容</option>
<option value="1">测试内容</option>
</select>
</div>
</div>
<div class="text">
<span>上架时间：</span>
<div class="bui_select">
<select name="" id="" class="select">
<option value="1">测试内容</option>
<option value="1">测试内容</option>
<option value="1">测试内容</option>
</select>
</div>
</div>
<div class="text">
<span>搜索</span>
<input type="text" value="" class="search">
</div>
</div>
</div>

<table class="table" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th width="15%">编号</th>
<th width="25%">标题</th>
<th width="35%">来源</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>

<td><input type="checkbox" id="c1" class="check"><label for="c1" class="label">001</label></td>
<td>后台设计</td>
<td>测试内容</td>
<td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>

b8a1
</tr>
<tr>
<td><input type="checkbox" id="c2" class="check"><label for="c2" class="label">001</label></td>
<td>后台设计</td>
<td>测试内容</td>
<td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
</tr>
<tr>
<td><input type="checkbox" id="c3" class="check"><label for="c3" class="label">001</label></td>
<td>后台设计</td>
<td>测试内容</td>
<td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
</tr>
<tr>
<td><input type="checkbox" id="c4" class="check"><label for="c4" class="label">001</label></td>
<td>后台设计</td>
<td>测试内容</td>
<td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
</tr>
<tr>
<td><input type="checkbox" id="c5" class="check"><label for="c5" class="label">001</label></td>
<td>后台设计</td>
<td>测试内容</td>
<td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
</tr>
<tr>
<td><input type="checkbox" id="c6" class="check"><label for="c6" class="label">001</label></td>
<td>后台设计</td>
<td>测试内容</td>
<td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
</tr>
<tr>
<td><input type="checkbox" id="c7" class="check"><label for="c7" class="label">001</label></td>
<td>后台设计</td>
<td>测试内容</td>
<td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
</tr>
<tr>
<td><input type="checkbox" id="c8" class="check"><label for="c8" class="label">001</label></td>
<td>后台设计</td>
<td>测试内容</td>
<td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
</tr>
<tr>
<td><input type="checkbox" id="c9" class="check"><label for="c9" class="label">001</label></td>
<td>后台设计</td>
<td>测试内容</td>
<td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
</tr>
</tbody>
</table>
</div>
yonghu.jsp 是你点击用户管理时自动跳转到yonghu.jsp<body>
yonghu
</body>我的jsp目录是这样的需要注意的是jsp不能卸载web-InF下面

实现的效果如图

当点击用户列表

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航