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

左侧菜单

 
 

        
 所有菜单
        

        

右侧内容

 
 

     
加载页面中...
 

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("
"+menu.name+“
");
                }
        }

           $("#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);
		});
	}