我们以前用iframe直接引入另外一个网页,简单粗暴,但是不利于seo。破坏界面的完整性。
下面可以用div替代。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>main</title>
<script src="jquery.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.get("a.html",function(data){ //初始將a.html include div#iframe
$("#iframe").html(data);
});
$(function(){
$('.list-side li').click(function() {
// 找出 li 中的超链接 href(#id)
var $this = $(this),
clickTab = $this.find('a').attr('target'); // 找到链接a中的targer的值
$.get(clickTab,function(data){
$("#iframe").html(data);
});
});
});
});
</script>
</head>
<body>
<h2>不要点击链接,点击链接行的空白处看看</h2>
<ul class="list-side">
<li><a target="a.html" >about</a></li>
<li><a target="b.html" >news</a></li>
<li><a target="c.html" href="c.html">product</a></li>
<li><a href="" target="_blank" >contact</a></li>
</ul>
<div id="iframe">
<!--jquery 插入html 位址-->
</div>
</body>
</html>a.html,b.html以及c.html没有意义,就不放了
注意要引入
jquery