码迷,mamicode.com
首页 > 其他好文 > 详细

左边导航点击右边显示不同的页面内容

时间:2018-12-24 12:04:49      阅读:547      评论:0      收藏:0      [点我收藏+]

标签:query   页面   样式   ceshi   .ajax   javascrip   $.ajax   dom   col   

首先建两个html文件(比如:new_file.html和vuesocket.html),里面也可以写各自的样式和脚本代码

然后在导航页开始引入:

      <ul>
          <li id=‘roll‘>显示滚动页面</li>
          <li id=‘ceshi‘>显示测试</li>
      </ul>
      <div id="sse"></div>
<script src=‘jquery-2.2.3.min.js‘></script>
    <script type="text/javascript">
        $(‘#roll‘).click(function(){
            html(‘new_file.html‘,$(‘#sse‘))
        })
        $(‘#ceshi‘).click(function(){
            html(‘vuesocket.html‘,$(‘#sse‘))
        })
        function html(url,dom){
            $.ajax({
                url:url,
                success:function(html){
                    dom.html(html)
                }
            })
        }
    </script>

 

左边导航点击右边显示不同的页面内容

标签:query   页面   样式   ceshi   .ajax   javascrip   $.ajax   dom   col   

原文地址:https://www.cnblogs.com/chenchenhao/p/10167705.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!