jsp页面上方导航不变,下面内容改变

jsp页面上方导航不变,下面内容改变,第1张

1、点击导航,页面刷新,加载完成后重新使导航内容为刷新前的内容,通过url中传参就可以达到了。

2、采用单页面的方式,内容都写在页面中,初始化时,仅显示当前内容,其他内容隐藏,通过点击导航条来切换需要显示的内容。

一.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="mainFram

用户登陆后,读取权限,赋给session对象,设置导航时根据读取的session属性区分即可。 我的例子,你看一下。

if(session.getAttribute("rank").equals("1"))

{

%>

<li><a href="managenews.jsp" id="nav_1" onmouseover="showMenu('nav_1','subnav1')">新闻资讯</a>

</li>

<li><a href="manageplayer.jsp" id="nav_2" onmouseover="showMenu('nav_2','subnav2')">球星专区</a>

</li>

<li><a href="photocenter.jsp" id="nav_3" onmouseover="showMenu('nav_3','subnav3')" target="_blank">图片站</a>

</li>

<li><a href="managecenter.jsp" id="nav_4" onmouseover="showMenu('nav_4','subnav4')">后台管理中心</a>

</li>

<%

}

else

{

%>

<li><a href="newscenter.jsp" id="nav_1" onmouseover="showMenu('nav_1','subnav1')">新闻资讯</a>

</li>

<li><a href="playercenter.jsp" id="nav_2" onmouseover="showMenu('nav_2','subnav2')">球星专区</a>

</li>

<li><a href="photocenter.jsp" id="nav_3" onmouseover="showMenu('nav_3','subnav3')" target="_blank">图片站</a>

</li>

<li><a href="mycenter.jsp" id="nav_4" onmouseover="showMenu('nav_4','subnav4')">我的资料</a>

</li>

<%

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/12002837.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存