实现一个框架,利用iframe跳转

<style>
        ul li {
            list-style: none ;
        }
        .header ul li {
            float: left ;
        }
        .header ul li.first {
            margin-left: 30px ;
        }
        
        .header ul li {
            float: left ;
            color: #231815;
            display: inline-block ;
            width: 112px ;
            height: 72px ; 
            text-align: center ;
            line-height:72px ;
            cursor: pointer ;
            font-size:25px
        }
        a {
            color:#231815;
            text-decoration: none ;
        }
        .header ul li:hover {
            background:#dbdbdb;
        }
        body{margin:0; padding:0;}
    </style>
    

  </head>
  <body>
      <div style="width: 100%; height: 10%; top: 0;position: absolute;">
      <div style="width: 28%; height: 100%; top: 0; left:0px;right:400px;position: absolute;background-image: url(./beijing/wojia.jpg);border-bottom:1px solid #231815;"></div>
      <div class="header" style="width: 72%; height: 100%; top: 0; right:0px;position: absolute;border-bottom:1px solid #231815;">
          <ul>
             <li class='first'><a onclick="main()">首页</a></li>
             <li></li>
             <li><a onclick="xinxi()">小区信息</a></li>
             <li></li>
             <li><a href="javascript:void(0)">事务处理</li>
             <li></li>
             <li><a href="javascript:void(0)">权限设置</li>
             <li></li>
             <li><a href="javascript:void(0)">编辑系统</a></li>
           </ul>
        </div>
    </div>

这是上一次写好的框架,这个时候我需要在这个框架中跳转到别的页面,如下图所示

这就是页面写好的然后利用iframe跳转

<iframe style="width: 100%; height: 90%; top: 10%;position: absolute;" frameborder=0 scrolling=no id="myframe" name="myframe" src="turnToDash.action" >这是该框架下面页面,即一打开便可以看到这个页面</iframe>
    <script type="text/javascript">
        function xinxi(){
            document.getElementById("myframe").src="turnToXiaoqu.action";点击事件后的切换页面。
        }
        function main(){
            document.getElementById("myframe").src="turnToDash.action";
        }
    </script>

后台:利用action跳转

<action name="turnToXiaoqu" class="com.ps.action.ShouyeAction" method="turnToXiaoqu">
	result name="find">/WEB-INF/Xiaoqu.jsp</result>
</action>

action:
public String turnToXiaoqu(){
	return("find");
}
public String turnToDash(){
	return("change");
}

猜你喜欢

转载自blog.csdn.net/dengdengchen/article/details/82662016