frame实现部分刷新

最新推荐文章于 2021-05-26 12:48:53 发布

huihui10086

最新推荐文章于 2021-05-26 12:48:53 发布

阅读量2k

点赞数

分类专栏： web前端文章标签： web前端框架

本文链接：https://blog.csdn.net/u012763269/article/details/48654705

版权

web前端专栏收录该内容

58 篇文章 0 订阅

订阅专栏

最近在找新的实习工作，所以面试了很多的公司，各个公司的面试问题基本相同，但也会针对自己公司要使用的产品技术来问一些有针对性的问题，例如下面一题，实现类似微信页面中，底部4个按钮，点击之后，底部按钮不刷新，但是上面的内容要相应的进行刷新。

解决这个问题有很多方法，我想到了两个，一个是ajax，一个就是框架（frame），最后决定选择使用frame，接下来看部分核心代码：

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<style type="text/css">
	* {
	    	margin: 0;
	    	padding: 0;
	    }
	</style>
</head>
<frameset rows="*,60">

  
  <frame src="https://www.baidu.com/" name="showframe" frameborder="0">
  <frame src="nav.html" frameborder="0" scrolling="no">

</frameset>

</html>

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="iconfont.css">
	<style type="text/css">
	    * {
	    	margin: 0;
	    	padding: 0;
	    	
	    }
		ul {
			list-style: none;
			height: 100%;
			width: 100%;
            
		}
		li {
			display: inline-block;
			width: 24%;
			border: solid 1px #ccc;
			height: 100%;
			text-align: center;
			line-height: 60px;
		}
		a {
			display: inline-block;
			width: 100%;
			height: 100%;
			text-decoration: none;
			font-size: 24px;
			color: #000;
		}
		.iconfont {
			font-size: 32px;
			margin-right: 5px;
		}


	</style>
</head>
<body>

<ul>
	<li><a href="https://www.baidu.com/" target="showframe"><i class="iconfont"></i>Frame a</a></li>
	<li><a href="https://www.bilibili.com/" target="showframe"><i class="iconfont"></i>Frame b</a></li>
	<li><a href="http://www.qq.com/" target="showframe"><i class="iconfont"></i>Frame c</a></li>
	<li><a href="http://www.91ala.com/" target="showframe"><i class="iconfont"></i>Frame d</a></li>
</ul>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$("a").click(function(){
			$(this).css({"color":"blue"}).parents('li').siblings().children('a').css({"color":"#000"});
		});
	});
</script>


</body>
</html>

上面代码中用到了jquery还有iconfont字体图标来辅助。