ajax点击左侧二级导航条,右侧显示内容

需要引入:

<link rel="stylesheet" href="bootstrap.css">

<script src="jquery-1.11.3.js"></script>

/*main.css*/

.main-container {position: relative;}.left_list {border: 1px solid #3b3b1f;position: fixed;top: 60px;overflow: auto;z-index: 1;width: 220px !important;height: 94% !important;}.l_top_nav {background: #0a9dc7;height: 42px;line-height: 46px;padding-left: 20px;color: #fff;font-size: 16px;border-bottom: 1px solid rgba(0, 0, 0, 0.15);}

/*左侧导航区*/.main-container {position: relative;}.left_list {border: 1px solid #3b3b1f;position: fixed;top: 60px;overflow: auto;z-index: 1;width: 220px !important;height: 94% !important;}.l_top_nav {background: #0a9dc7;height: 42px;line-height: 46px;padding-left: 20px;color: #fff;font-size: 16px;border-bottom: 1px solid rgba(0, 0, 0, 0.15);}/*ul一级导航*/.nav_list {width: 220px;background: #0aaedb;cursor: pointer;}ul.nav_list > li > a {display: block;padding: 0 16px 0 10px;hieght: 40px;line-height: 40px;}ul.nav_list > li > a > span {display: inline-block;width: 30px;position: relative;top: 1px;}ul.nav_list > li > a > span.glyphicon-chevron-down {position: absolute;left: 166px;top: 14px;width: 30px;}.nav_list > li > ul.menu {/*padding: 5px 0;*/border-top: 1px solid rgba(0, 0, 0, 0.15);background: rgba(10, 158, 203, 0.42);font-size: 13px;}/*li二级导航*/.nav_list > li > ul.menu > li {position: relative;top: 0;}.active {background: #0a79a0;}.nav_list > li > ul.menu > li > a {padding: 12px 0 9px 37px;display: block;position: relative;top: 0px;height: 40px;}.nav_list > li > ul.menu > li > a > i {font-size: 10px;position: absolute;left: 15px;top: 12px;}.icon-double-angle-right:before {content: ">";}

.page-content {padding: 48px 6px 36px 212px;}

<!--main.html-->

<div class="main-container" id="main-container"><div class="left_list" id="left_list"><div class="l_top_nav"><span>导航菜单</span></div><ul class="nav_list nav " id="leftList"><li><a href="#"><span class="glyphicon glyphicon-user"></span>用户管理<span class="glyphicon glyphicon-chevron-down"></span></a><ul class="menu list-unstyled dplay"><li class="active"><a href="javascript:a()"><i class="icon-double-angle-right"></i>用户管理</a>

	  </li><li>

<a href="javascript:a()"><i class="icon-double-angle-right"></i>角色管理</a>

	  </li><li>

<a href="javascript:a()"><i class="icon-double-angle-right"></i>菜单管理</a>

	  </li></ul></li><li><a><span class="glyphicon glyphicon-comment"></span>客户信息<span class="glyphicon glyphicon-chevron-down"></span></a><ul class="menu list-unstyled hide"><li>

	    <a href="javascript:a()"><i class="icon-double-angle-right"></i>客户消息</a></li><li>

	    <a href="javascript:a()"><i class="icon-double-angle-right"></i>我的消息</a></li><li><a href="javascript:a()"><i class="icon-double-angle-right"></i>广告代理关系</a></li></ul></li></ul></div>

  <!--右侧显示内容区--><div class="page-content"></div></div>

//main.js

//ajax

function a() {$.ajax({url: "url.html",  //要请求的页面global: false,type: "get",dataType: "html",  //请求类型async: false,   //是否为异步请求success: function (msg) {  //msg得到的数据(这里得到的是整个html代码)// alert(msg);$('.page-content').html(msg);}})};

//左侧导航

$('.nav>li>a').bind('click', function () {if ($(this).next('ul').hasClass('dplay')) {$(this).parent('li').removeClass('hideli');$(this).next('ul').removeClass('dplay').addClass('hide').slideUp();}else{$(this).parent('li').siblings().children(":last-child").removeClass('dplay').addClass('hide');$(this).parent('li').addClass('hideli');$(this).parent('li').siblings().removeClass('hideli');$(this).next('ul').removeClass('hide').addClass('dplay').slideDown();}});$('.menu>li').bind('mouseenter',function () {if($(this).hasClass('active')){}else{$(this).addClass('active');$(this).siblings('li').removeClass('active');}});

效果: