在以前的開發中，我們很喜歡使用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>

<!--選單動態重新整理-->
        <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>