<iframe>

//这是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>