菜单栏点击事件，用ajax加载页面

最新推荐文章于 2022-09-22 17:07:45 发布

weixin_42309564

最新推荐文章于 2022-09-22 17:07:45 发布

阅读量1.3k

点赞数

分类专栏： ajax页面加载文章标签：框架菜单栏和内容分割 ajax

本文链接：https://blog.csdn.net/weixin_42309564/article/details/80846092

版权

ajax页面加载专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<body>

//定义菜单栏
<div tabindex="1" class="sidebar" id="sidebar" style="cursor: url(https://cdnjs.cloudflare.com/ajax/libs/slider-pro/1.3.0/css/images/openhand.cur),n-resize; -ms-overflow-x: hidden; -ms-overflow-y: hidden; -ms-overflow-style: none; -ms-touch-action: none;">

<ul id="nav">

<li>
<a title="" id="a_0" href="javascript:void(0)"><i class="fa fa-home"></i> 全网信息
</a>
<ul id="u_0">
</ul>
</li>
<li>
<a title="设备管理" id="a_2" href="#web_add.html"><i class="fa fa-desktop"></i> 设备管理
</a>
</li>
<li>
<a title="任务管理" href="javascript:void(0)"><i class="fa fa-server"></i> 任务管理
</a>
</li>
<li>
<a title="自动发现" href="javascript:void(0)"><i class="fa fa-search"></i> 自动发现
</a>
<ul>
<li>
<a id="a_9" href="#discover/nodediscover.html">发现设备</a>
</li>
<li>
<a id="a_10" href="#discover/linkdiscover.html">发现链路</a>
</li>
<li>
<a id="a_11" href="#discover/resourcediscover.html">发现资源</a>
</li>
</ul>
</li>
<li>
<a title="故障管理" href="#testa.html"><i class="fa fa-exclamation-triangle"></i> 故障管理
</a>
<ul>
<li>
<a id="a_12" href="#alarmmanagement/currentalarm.html">当前告警</a>
</li>
<li>
<a id="a_13" href="#alarmmanagement/historyalarm.html">历史告警</a>
</li>
<li>
<a id="a_14" href="#alarmmanagement/errorsolution.html">解决方案</a>
</li>
<li>
<a id="a_15" href="#alarmmanagement/alarmsound.html">告警声音</a>
</li>
<li>
<a id="a_16" href="#event/nodeeventmanager.html">事件管理</a>
</li>
</ul>
</li>

<li>
<a title="" href="javascript:void(0)"><i class="fa fa-bar-chart"></i> 报表统计
</a>
<ul>
<li>
<a id="a_21" title="系统信息一览" href="#systemReport.html">系统信息一览</a>
</li>
<li>
<a id="a_22" title="全网设备统计" href="deviceReport.html">全网设备统计</a>
</li>
</ul>
</li>
<li>
<a title="性能管理" href="javascript:void(0)"><i class="fa fa-tachometer"></i> 性能管理
</a>
<ul>
<li>
<a id="a_24" href="#perfmanager/actualPerf.html">实时性能</a>
</li>
<li>
<a id="a_25" href="#perfmanager/detailedperf.html">详细性能</a>
</li>
<li>
<a id="a_26" href="#perfmanager/summaryperf.html">性能汇总</a>
</li>
</ul>
</li>
</ul>
</div>

<div class="row index_div">

<div class="row mainbar ">
<div class="row">
<div class="loading" id="loading" style="display: none;">加载中...</div>
</div>
<div class="row page-head">
<h2 class="head-left" style="margin-top: 10px;margin-bottom: 10px;">
<span>全网信息>5680</span>
</h2>
</div>

<div class="row" id="subPage" name="subPage">
//将菜单栏链接的内容加载在这里
</div>
</div>

</div>

$(function() {

$("#a_0").click();
$.ajax({
url: "web.html",
context: document.body,
success: function(result) {

$("#subPage").html(result);
}
});
$("#nav a").click(function() {

var index=$(this).attr("href").indexOf("#");
if(index!=-1)
{

var urlAdd = $(this).attr("href").substr(index+1,$(this).attr("href").length-1);

$.ajax({
url: urlAdd,
context: document.body,
success: function(result) {

$("#subPage").html(result);
}
});
var a = $(this);
var title = "";

while(a.parent("li").parent("ul").attr("id") != "nav") {

title = a.parent("li").parent("ul").siblings("a").text() + ">" + title;
a = a.parent("li").parent("ul");
}

title = title + $(this).text();

$(".head-left span").text(title);
}
})

})

weixin_42309564

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
菜单栏点击事件，用ajax加载页面

&lt;body&gt; //定义菜单栏 &lt;div tabindex="1" class="sidebar" id="sidebar" style="cursor: url(https://cdnjs.cloudflare.com/ajax/libs/slider-pro/1.3.0/css/images/openhand.cur),n-resize; -ms-overflow-x: h...
复制链接

扫一扫