用JSP实现一个显示框架

在显示的地方嵌入一个iframe
<a href="a.jsp" target="mainframe"> A页面</a> | <a href="b.jsp" target="mainframe">B页面</a>|
<br>
<br>
<iframe name="mainframe" id="mainframe" width="500" height="500"></iframe>

用javascript控制页面元素啊~~很好用的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
</head>
<body>
<style type="text/css">
        *{font-size:10pt}
        </style>
    <form id="form1" runat="server">
    <div style="height: 500px">
    <script  type="text/javascript" >
    function
    show1(nam)
    {    nam1.style.borderBottom='none';
    nam1.style.background='none';
    nam2.style.borderBottom='1px solid #A8CFF0';
    nam2.style.backgroundColor='#E3EFFB';
    nam3.style.borderBottom='1px solid #A8CFF0';
    nam3.style.backgroundColor='#E3EFFB';
    nam4.style.borderBottom='1px solid #A8CFF0';
    nam4.style.backgroundColor='#E3EFFB';
    nam5.style.borderBottom='1px solid #A8CFF0';
    nam5.style.backgroundColor='#E3EFFB';
    cplist2.style.display='none';
    cplist3.style.display='none';
    cplist4.style.display='none';
    cplist5.style.display='none';
    cplist1.style.display='block'}
    function
    show2(nam)
    {    nam2.style.borderBottom='none';
    nam2.style.background='none';
    nam1.style.borderBottom='1px solid #A8CFF0';
    nam1.style.backgroundColor='#E3EFFB';
    nam3.style.borderBottom='1px solid #A8CFF0';
    nam3.style.backgroundColor='#E3EFFB';
    nam4.style.borderBottom='1px solid #A8CFF0';
    nam4.style.backgroundColor='#E3EFFB';
    nam5.style.borderBottom='1px solid #A8CFF0';
    nam5.style.backgroundColor='#E3EFFB';
    cplist1.style.display='none';
    cplist3.style.display='none';
    cplist4.style.display='none';
    cplist5.style.display='none';
    cplist2.style.display='block'}
    function
    show3(nam)
    {     nam1.style.borderBottom='1px solid #A8CFF0';
    nam1.style.backgroundColor='#E3EFFB';
    nam2.style.borderBottom='1px solid #A8CFF0';
    nam2.style.backgroundColor='#E3EFFB';
    nam3.style.borderBottom='none';
    nam3.style.background='none';
    nam4.style.borderBottom='1px solid #A8CFF0';
    nam4.style.backgroundColor='#E3EFFB';
    nam5.style.borderBottom='1px solid #A8CFF0';
    nam5.style.backgroundColor='#E3EFFB';
    cplist1.style.display='none';
    cplist2.style.display='none';
    cplist4.style.display='none';
    cplist5.style.display='none';
    cplist3.style.display='block'}
    function
    show4(nam)
    {     nam1.style.borderBottom='1px solid #A8CFF0';
    nam1.style.backgroundColor='#E3EFFB';
    nam2.style.borderBottom='1px solid #A8CFF0';
    nam2.style.backgroundColor='#E3EFFB';
    nam3.style.borderBottom='1px solid #A8CFF0';
    nam3.style.backgroundColor='#E3EFFB';
    nam4.style.borderBottom='none';
    nam4.style.background='none';
    nam5.style.borderBottom='1px solid #A8CFF0';
    nam5.style.backgroundColor='#E3EFFB';
    cplist1.style.display='none';
    cplist2.style.display='none';
    cplist3.style.display='none';
    cplist5.style.display='none';
    cplist4.style.display='block'}
    function
    show5(nam)
    {     nam1.style.borderBottom='1px solid #A8CFF0';
    nam1.style.backgroundColor='#E3EFFB';
    nam2.style.borderBottom='1px solid #A8CFF0';
    nam2.style.backgroundColor='#E3EFFB';
    nam3.style.borderBottom='1px solid #A8CFF0';
    nam3.style.backgroundColor='#E3EFFB';
    nam4.style.borderBottom='1px solid #A8CFF0';
    nam4.style.backgroundColor='#E3EFFB';
    nam5.style.borderBottom='none';
    nam5.style.background='none';
    cplist1.style.display='none';
    cplist2.style.display='none';
    cplist3.style.display='none';
    cplist4.style.display='none';
    cplist5.style.display='block'}
    </script>

        <table width="750" height="25" border="0" cellpadding="0" cellspacing="0"  style="border:1px solid #A8CFF0; border-bottom:none">

          <tr>
          <td width="20%" align="center" onmouseover="javascript:show1(this)" id="nam1">
          <p><A href="chanpin.asp?lx=1" style="color:#000000; text-decoration:none">第一个</A>
          </p>
          </td>
          <td width="20%" align="center"  style="border-bottom:1px solid #A8CFF0;border-left:1px solid #A8CFF0;background-color:#E3EFFB;" onmouseover="javascript:show2(this)" id="nam2">
          <A href="chanpin.asp?lx=2" style="color:#000000; text-decoration:none">第二个</A>
          </td>
          <td width="20%" align="center"  style="border-bottom:1px solid #A8CFF0;border-left:1px solid #A8CFF0;background-color:#E3EFFB;" onmouseover="javascript:show3(this)" id="nam3">
          <A href="chanpin.asp?lx=3" style="color:#000000; text-decoration:none">第3个</A>
          </td>
          <td width="20%" align="center"  style="border-bottom:1px solid #A8CFF0;border-left:1px solid #A8CFF0;background-color:#E3EFFB;" onmouseover="javascript:show4(this)" id="nam4">
          <A href="chanpin.asp?lx=4" style="color:#000000; text-decoration:none">第4个</A>
          </td>
          <td width="20%" align="center"  style="border-bottom:1px solid #A8CFF0;border-left:1px solid #A8CFF0;background-color:#E3EFFB;" onmouseover="javascript:show5(this)" id="nam5">
          <A href="chanpin.asp?lx=5" style="color:#000000; text-decoration:none">第5个</A>
          </td>

          </tr>
          </table>
          <table width="750" height="370" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #A8CFF0; border-top:none; padding-top:10px; border-collapse:collapse">
          <tr>
          <td>
          
          <div id="cplist1" style="width:100%; height:370px; overflow:hidden">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
           <td>                      第一个第一个第一个第一个第一个第一个
           </td>
           </tr>
            </table>
            <br />

            </div>
            <div id="cplist2" style="width:100%; height:370px; overflow:hidden; display:none">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
            <td>                     第二个第二个第二个第二个第二个第二个第二个第二个
            </td>
            <td valign="top">
            </td>
            </tr>
            </table>
            <br />

            </div>
            <div id="cplist3" style="width:100%; height:370px; overflow:hidden; display:none" >
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
           <td>                    第3个第3个第3个第3个第3个第3个
           </td>
            <td valign="top">
            </td>
           </tr>
            </table>
            <br />

            </div>
            <div id="cplist4" style="width:100%; height:370px; overflow:hidden; display:none">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
           <td>                      <asp:GridView ID="GridView4" runat="server">
                            </asp:GridView>第4个第4个第4个第4个第4个第4个
           </td>
            <td valign="top">
            </td>
           </tr>
            </table>
            <br />

            </div>
            <div id="cplist5" style="width:100%; height:370px; overflow:hidden; display:none">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
           <td>                      <asp:GridView ID="GridView5" runat="server">
                            </asp:GridView>第5个第5个第5个第一个第5个第一个
           </td>
            <td valign="top">
            </td>
           </tr>
            </table>
            <br />

            </div>
            
            </td>
            </tr>
            </table>

    </div>
    </form>
</body>
</html>

你用AJAX的框架做，应该不超过20行代码，比如说EXTJS或Jquery

JS做的比较复杂啊,
我只懂得简单的JS复杂的就不懂了
出现问题定位很困难 ,
我想挑个简单点的来处理, 因为这个要的比较急.

能不能详细说下, 我对AJAX没什么研究最好是原码这样学习一下比较快,

太多了，你随便搜索一下 extjs tabpanel、jquery tab 之类的，应该非常多，最好找到相应技术的API，也很好找的。大致是里面有个load之类的属性，设上你的页面地址就直接搞定了，写代码20分钟，查文档2个小时。这么就搞定了。我帮你找一个，你先看看http://blog.163.com/weixiang-liu/blog/static/1213091492009699427820/

http://er.javaeye.com/blog/421360看这个，人家做的tabpanel多漂亮

对不起,写错了,是下边这样! 你放到html文件里试一下<hr style="border: 1px dashed" />
<ul style="list-style:none; width: 100%">
<li id="ali" style="float: left; width: 50%" onclick="area.style.display='block'; area.innerText='a内容'">A页面</li>
<li id="bli" style="float: left; width: 50%" onclick="area.style.display='block'; area.innerText='b内容'">B页面</li>
</ul>
<hr style="clear: both" />
<div id="area">显示区域</div>

我发的代码直接就能用，只要把JavaScript代码拿出其他的换成自己的样式及HTML代码就行了。至于你说的表单提交问题，每一个table都可以用各自的提交按钮不同的表单，当然如果你不愿意也可以用一个提交按钮，只不过在服务器端取数据的时候就要多加注意，不过如果其他的table中的表单信息你没有填写的话，服务器端得到的就是null，这个在取得时候时候要多加注意。当然我现在有点空如果你能给我你的代码（不能包含数据库操作，我这不能装）的话我可以帮你改改。mail：[email protected]

div+css就可以搞定，点击A的时候，隐藏B的内容，点B的时候，A也同样隐藏，甚至鼠标停留都可以实现动作了。楼主看看其他网站的代码就知道了，根本不需要用框架。如果用框架的话，每点击一次就要从服务器读取数据一次，很不划算的。这个网页美工就可以搞定

但是我的每个页面里面还得有提交的动作啊. 要提交到SERVLET
这样可以实现吗

我所说的就是  .
点击 A  显示 A页面.  A页面中有提交按钮提交A 的内容
点击 B  显示 B页面.  B页面中有提交按钮提交B 的内容

调试易

用JSP实现一个显示框架

解决方案 »