使用Jquery的局部刷新功能，实现菜单内容的动态切换

在以前的开发中，我们很喜欢使用iframe实现菜单内容的动态切换。但是iframe的可操作性、搜索上、与整体页面的配合上，存在着诸多问题。

现在我们可以使用成熟的jquery ajax技术实现菜单的动态切换，简单而且实用。

我们的菜单区域一般是这样子的：

<!-- Sidebar Menu -->
  <ul class="sidebar-menu" id="mainMenu">
 <li class="header">用户菜单</li>
<li class="treeview">
  <a href="#" > 系统管理</a>
   <li class="treeview">
    <ul class="treeview-menu">
     <li><a  target="${ctx}/test1" ></i>用户管理</a></li>
      <li><a  target="${ctx}/test2" ></i>角色管理</a></li>
    </ul>
</li>
</ul>
     

我们的菜单动态内容显示区域是这样的：

<!-- Content Wrapper. Contains page content -->
            <div class="content-wrapper" id ="mainContent">
</div>

在页面编辑动态刷新的jquery语句：

<!--菜单动态刷新-->
        <script type="text/javascript">
            $(function () {

                $.get("${ctx}/dashboard", function (data) {
                    $("#mainContent").html(data);//初始化加载界面  
                });
                $('#mainMenu ul li').click(function () {//点击li加载界面  
                    var current = $(this),
                            target = current.find('a').attr('target'); // 找到链接a中的targer的值  
                            
                    $.get(target, function (data) {
                        $("#mainContent").html(data);
                    });
                });

            });
        </script>

这样，就大功告成了，当然前提是要引入jquery的js,另外可以根据需要修改上面的选择器，实现特殊的功能。