1000字范文 > 后台管理页面通过点击左侧导航栏的菜单项实现右边内容的改变

后台管理页面通过点击左侧导航栏的菜单项实现右边内容的改变

时间：2018-07-14 18:36:11

前端页面部分

<aside id="left-panel"><div class="login-info"><span> <a href="javascript:void(0);" id="show-shortcut"data-action="toggleShortcut"> <imgsrc="${ctx}/img/avatars/sunny.png" alt="me" class="online" /> <span>john.doe</span> <i class="fa fa-angle-down"></i></a></span></div><nav><ul><li class=""><a href="${ctx}/manage/businessManag.html" title="商家管理"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">商家管理</span></a><ul><li class=""><a href="${ctx}/manage/businessManag.html" title="商家管理"><span class="menu-item-parent">商家管理</span></a></li><li class=""><a href="${ctx}/manage/mealsManag.html" title="菜品管理"><span class="menu-item-parent">菜品管理</span></a></li><li class=""><a href="${ctx}/manage/orderManag.html" title="订单管理"><span class="menu-item-parent">订单管理</span></a></li><li class=""><a href="${ctx}/manage/userManag.html" title="用户管理"><span class="menu-item-parent">用户管理</span></a></li><li class=""><a href="${ctx}/manage/testManager.html" title="测试页面"><span class="menu-item-parent">测试页面</span></a></li></ul></li></ul></nav><span class="minifyme" data-action="minifyMenu"> <iclass="fa fa-arrow-circle-left hit"></i></span></aside><div id="main" role="main"><div id="ribbon"><span class="ribbon-button-alignment"> <span id="refresh"class="btn btn-ribbon" data-action="resetWidgets"data-title="refresh" rel="tooltip" data-placement="bottom"data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings."data-html="true"data-reset-msg="Would you like to RESET all your saved widgets and clear LocalStorage?"><iclass="fa fa-refresh"></i></span></span><ol class="breadcrumb"></ol></div><div id="content"></div></div><div class="page-footer"><div class="row"><div class="col-xs-12 col-sm-6"></div><div class="col-xs-6 col-sm-6 text-right hidden-xs"><div class="txt-color-white inline-block"></div></div></div></div>

js代码部分

变量值如下：

$.root_ = $('body');$.navAsAjax = true; debugState = true,bread_crumb = $('#ribbon ol.breadcrumb'),

左侧导航栏组菜单项的打开与关闭

$.fn.extend({//pass the options variable to the functionjarvismenu : function(options) {var defaults = {accordion : 'true',speed : 200,closedSign : '[+]',openedSign : '[-]'},// Extend our default options with those provided.opts = $.extend(defaults, options),//Assign current element to variable, in this case is UL element$this = $(this);//add a mark [+] to a multilevel menu$this.find("li").each(function() {if ($(this).find("ul").size() !== 0) {//add the multilevel sign next to the link$(this).find("a:first").append("<b class='collapse-sign'>" + opts.closedSign + "</b>");//avoid jumping to the top of the page when the href is an #if ($(this).find("a:first").attr('href') == "#") {$(this).find("a:first").click(function() {return false;});}}});//open active level$this.find("li.active").each(function() {$(this).parents("ul").slideDown(opts.speed);$(this).parents("ul").parent("li").find("b:first").html(opts.openedSign);$(this).parents("ul").parent("li").addClass("open");});$this.find("li a").click(function() {if ($(this).parent().find("ul").size() !== 0) {if (opts.accordion) {//Do nothing when the list is openif (!$(this).parent().find("ul").is(':visible')) {parents = $(this).parent().parents("ul");visible = $this.find("ul:visible");visible.each(function(visibleIndex) {var close = true;parents.each(function(parentIndex) {if (parents[parentIndex] == visible[visibleIndex]) {close = false;return false;}});if (close) {if ($(this).parent().find("ul") != visible[visibleIndex]) {$(visible[visibleIndex]).slideUp(opts.speed, function() {$(this).parent("li").find("b:first").html(opts.closedSign);$(this).parent("li").removeClass("open");});}}});}}// end ifif ($(this).parent().find("ul:first").is(":visible") && !$(this).parent().find("ul:first").hasClass("active")) {$(this).parent().find("ul:first").slideUp(opts.speed, function() {$(this).parent("li").removeClass("open");$(this).parent("li").find("b:first").delay(opts.speed).html(opts.closedSign);});} else {$(this).parent().find("ul:first").slideDown(opts.speed, function() {/*$(this).effect("highlight", {color : '#616161'}, 500); - disabled due to CPU clocking on phones*/$(this).parent("li").addClass("open");$(this).parent("li").find("b:first").delay(opts.speed).html(opts.openedSign);});} // end else} // end if});} // end function});

url地址跳转

首先我们需要了解window.location对象所包含的属性

由以上知识可以写出url跳转部分的代码：

//先判断导航栏里是否有内容if ($('nav').length) {checkURL();}//菜单项点击事件$(document).on('click', 'nav a[href!="#"]', function(e) {e.preventDefault();var $this = $(e.currentTarget);//判断a的父标签li标签是否被选中以及a标签是否有target属性if (!$this.parent().hasClass("active") && !$this.attr('target')) {// update window with hash// you could also do here: thisDevice === "mobile" - and save a little more memoryif ($.root_.hasClass('mobile-view-activated')) {$.root_.removeClass('hidden-menu');$('html').removeClass("hidden-menu-mobile-lock");window.setTimeout(function() {//忽略地址栏的请求参数if (window.location.search) {window.location.href =window.location.href.replace(window.location.search, '').replace(window.location.hash, '') + '#' + $this.attr('href');} else {window.location.hash = $this.attr('href');}}, 150);// it may not need this delay...} else {if (window.location.search) {window.location.href =window.location.href.replace(window.location.search, '').replace(window.location.hash, '') + '#' + $this.attr('href');} else {window.location.hash = $this.attr('href');}}}});// fire links with targets on different window$(document).on('click', 'nav a[target="_blank"]', function(e) {e.preventDefault();var $this = $(e.currentTarget);window.open($this.attr('href'));});// fire links with targets on same window$(document).on('click', 'nav a[target="_top"]', function(e) {e.preventDefault();var $this = $(e.currentTarget);window.location = ($this.attr('href'));});// all links with hash tags are ignored$(document).on('click', 'nav a[href="#"]', function(e) {e.preventDefault();});// DO on hash change$(window).on('hashchange', function() {checkURL();});