ajax模仿iframe 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{background: #f2f2f2;}
            *{margin: 0;padding: 0;}
            .head{
                height: 80px;
                width: 100%;
                background: cornflowerblue;
            }
            .menuqq{
                background: red;
                width: 120px;
                position: absolute;
                top: 80px;
                bottom: 0;
                left: 0;
                right: 0px;
            }
            .container{
                position: absolute;
                top: 80px;
                right: 0;
                bottom: 0;
                left: 120px;
                background: lightgrey;
                overflow: auto;
            }
            .menu{
                height: 800px;
                width: 200px;
                margin: 0 auto;
                background: blue;
            }
            .menu1{background: red;}
            .menu2{background: blue;}
            .menu3{background: yellow;}
            .menu4{background: orange;}
        </style>
        <script src="js/jquery.js"></script>
    </head>
    <body>
        
        <div class="head"></div>
        <div class="menuqq">
            <a class="1">按钮1</a>
            <br />
            <a class="2">按钮2</a>
            <br />
            <a class="3">按钮3</a>
            <br />
            <a class="4">按钮4</a>
        </div>
        <div class="container">
            <!--这里就是放置内容的地方，点击左侧实现内容区切换页面-->
        </div>
    
    <script>
    $(function(){
        $('a').on('click',function(){
            var num = $(this).attr('class');
            $('.container').load('menu' + num + '.html');
        });
    });
    </script>
    </body>
</html>

nume1.html:个人觉得ajax加载的内容不用写<html>这部分了，毕竟能少加载一些就少加载一些嘛

<div class="menu menu1">
    
</div>

 

posted @ 2017-04-11 14:41  党兴明  阅读(198)  评论(0)  编辑  收藏  举报