//这是A页面需要引用已经写好的B页面的样式
<section>
//标签内更多属性请自行查阅W3CSchool
<iframe id="iframe" name="snav" src="nav.html" scrolling="no"></iframe>
</section>
<div>内容一</div>
<div>内容二</div>
//这是B页面结构
<aside id="nav">
<div>
<h3>
<p>BUG制造机</p>
</h3>
</div>
<ul>
<li>
<a href="#/">
标题一
<span>
<b class="glyphicon glyphicon-menu-right"></b>
</span>
</a>
</li>
<li>
<a href="#/">
标题二
<span>
<b class="glyphicon glyphicon-menu-right"></b>
</span>
</a>
</li>
</ul>
</aside>
//由B页面高宽撑开section
<script>
$('#iframe').on('load',function(){
var oHeight = $(this).contents().find("#nav").height();
var oWidth = $(this).contents().find("#nav").width();
$('section').height(oHeight);
$('section').width(width);
//WARNING:document.frames 只有 IE Opera 支持
//console.log($("#nav", window.frames['snav'].document).html())
//打印可以查看是否真的获取到了标签内的
//点击事件 页面切换
$("#nav ul li", window.frames['snav'].document).click(function(){
$('div').siblings('div').removeClass('context');
$('div').eq($(this).index()).addClass('context');
});
})
</script>
网友评论