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

jsp实现导航栏

2014-04-22 18:47 309 查看

一．frameset实现导航栏在web开发中必不可少，其中利用frameset来实现是一种比较常见的方法。frameset通过target可将相关的页面连接起来，实现导航。实际开发中注意target的对应关系即可。效果图如下：

主导航区top.jsp
左侧分导航left.jsp	内容区main.jsp
页脚down.jsp

1.index.jsp 纵向：主导航，主页面，页脚三块.
横向：主页面又分左导航，内容两块

<frameset rows="98,*,5" frameborder="no">
<frame src="top.jsp" name="topFrame" id="topFrame"/> <frameset cols="168,*" frameborder="no"> <frame src="left.jsp"id="leftFrame" />
<frame src="main.jsp" id="mainFrame" scrolling="yes"/>
</frameset> <frame src="down.jsp" name="bottomFrame"id="bottomFrame" /> </frameset>

2.top.jsp利用表格或div、css将相应文字布局成横向显示即可.根据target的指向，即可对应到左侧导航，主要代码如下：<a href="left_data.jsp"target="leftFrame"> 数据管理</a>
<a href="left_web.jsp" target="leftFrame"> 网站管理</a>
<a href="left_user.jsp"target="leftFrame"> 用户管理</a>
3.left.jsp利用表格或div、css将相应文字布局成树向显示即可.左侧导航根据target的指向，即可显示内容区，主要代码如下：<a href="land_add.jsp" target="mainFrame"> 录入土地信息</a>
<a href="land_manage.jsp" target="mainFrame">管理土地信息</a>
<a href="building_add.jsp" target="mainFrame">录入新房信息</a>
<a href="building_manage.jsp" target="mainFrame">管理新房信息</a>

二．table镶嵌iframe实现 Iframe的实现原理与frameset类似，其可将其他页面引入当前页面，本文利用最简单的表格布局展示其使用方法。
样例图如下：

网站标志主导航区
左侧分导航	内容区
页脚

1.index.html 利用简单的表格布局
纵向：主导航，主页面，页脚三块.

<html>
<body>
<tablewidth="100%" height="100%" border="1"cellspacing="0">
<tr height="10%">
<td width="30%" >左上角网站标志</td>
<td>
<a href="data.html"target="main">数据管理</a>
<ahref="web.html" target="main">网站管理</a>
<ahref="user.html" target="main">用户管理</a>
</td>
</tr>
<tr height="90%">
<td>
<!—加左导航的内容页 -->
<iframe name="main"src="main.html" width="100%" height="100%">
</td>
</tr>
<tr>
<td>页脚</td>
</tr>
</body>
</html>

2.data.html（web.html, user.html相同）横向：主页面又分左导航，内容两块

<html>
<body>
<tablewidth="100%" height="100%" border="1" >
<tr>
<tdwidth="30%" >
<a href="land_add.jsp"target=" content"> 录入土地信息</a>
<a href="land_manage.jsp"target=" content">管理土地信息</a>
<a href="building_add.jsp"target=" content">录入新房信息</a>
<a href="building_manage.jsp"target=" content">管理新房信息</a>
</td>
<td width="70%">
<!--左侧导航指向的内容页-->
<iframe name="content"src="content.html" width="100%" height="100%">
</td>
</tr>
</body </html

3.land_add.jsp、land_manage.jsp等为自定义页面

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

标签： 导航 jsp frameset iframe

相关文章推荐

新的分享

章节导航