HTML--点击左侧导航栏，更新右侧页面(iframe)

在项目中，需要实现点击左侧栏目的条目，右侧的内容随之改变。

这里使用iframe实现

先写一个列表用于显示左侧的条目

<!-- 左侧导航 -->
        <div class="main_left" style="height:100%">
            <ul>
                <li data-src="">朝阳</li>
                <li data-src="">海淀</li>
                <li data-src="">丰台</li>
            </ul>
        </div>

接下来写右侧的子页面的内容

<!-- 右侧内容 -->
        <div class="main_right">
            <iframe frameborder="0" scrolling="yes" style="width:80%;height:100%" src="" ></iframe>
        </div>

最后写个方法，把点击左侧的内容和右侧的页面更新建立关联

 <script>
        $(function(){
            $(".main_left li").on("click",function(){
                var address =$(this).attr("data-src");
                $("iframe").attr("src",address);
            });
        });
    </script>

最后让2个div在页面中左右显示，使用css，这个就自己随意啦，贴一下自己的

.main_left{
    width: 150px;
    height: 100%;
    float:left;
    background:#c0c0c0;
    cursor:pointer;
}