bootstrap布局（四）-根据左侧菜单，显示对应右边内容

左侧菜单

 <div class="col-sm-3"> 
<div class="panel-body">
        <h4><i class="fa fa-pencil"></i> 所有菜单</h4>
        <ul class="nav nav-pills nav-stacked mail-nav" id="jobUL">
        </ul>
</div>
</div>

右侧内容

 <div class="col-sm-8"> 
<div  id="mainContent">
     <h1>加载页面中...</h1>
 </div>
<div>

juery

$(document).ready(function() {
    //动态加载菜单
     $.ajax({
        url: "getAllMenu",
        method: "post",
        data: {},
        dataType: "json",
        success: function(data) {
        var menuList =data.rows;
         if(menuList && menuList.length != 0){
                for(var i=0; i< menuList.length; i++){
                   var menu= menuList[i];
$("#menuUL").append("<li><a href=\"javascript:void(0)\" id="+menu.id+"><i class=\"fa fa fa-tasks\"></i>"+menu.name+“</a></li>");
                }
        }

           $("#menuUL li:first-child").addClass("active");   //默认激活第一个
           //默认加载第一项的页面的数据
         var href=  $("#menuUL li:first-child").find('a').attr('id');
        // alert(href);
         processLoadPage("getMenuById?Id="+href);
        }
        });


});


      //单击元素时，删除其他元素的激活状态
     $("#menuUL").on("click", "li", function() {
         //alert("li");
        $(this).siblings('li').removeClass('active');  // 删除其兄弟元素的样式
        $(this).addClass('active');                    // 为点击元素添加类名
    });


     $("#menuUL").on("click", "a", function() {
               var href = $(this).attr('id');
              processLoadPage("getMenuById?Id="+href);
            });

     function processLoadPage(url){
		$.get(url,function(data,status){
			$("#mainContent").html(data);
		});
	}