html中点击左边菜单右边内容切换
作为新⼿，拿到真的很棘⼿。很多⼈想到的是⽤iframe, 其实我的第⼀感也是，但是好像iframe正在被淘汰, 所以⼀直在寻新⽅法。、
当然，我还是先把iframe⽅法贴出来，这个⽅法是适⽤于对js不熟悉，或者刚⼊前端不就的童鞋们。
我们公司要做⼀个这样的后台系统（如下图所⽰）；第⼀次接触后台，⽽且还带有图表，着实⼩紧张了⼀把。经过多次在⽹上搜索和晚上的冥思苦想，最后到了两个解决⽅案；
1). 做成静态的
什么叫静态的？视觉欺骗⽽已。就是左边的结构还是正常写，并且在不同的页⾯不同的样⼦，每⼀个页⾯都有⼀个左边的menu菜单，在点击的，就不容易察觉，下⾯以bootstrap ace后台为例⼦。
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">Software Update</span>
<span class="pull-right">65%</span>
</div>
<div class="progress progress-mini ">
<div class="progress-bar "></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">Hardware Upgrade</span>
<span class="pull-right">35%</span>
</div>
<div class="progress progress-mini ">
<div class="progress-bar progress-bar-danger"></div>
</div>
</a>
</li>
如果上⾯的⽗级菜单没有连接，逻辑就有点不同了。如果没有，点击⽗级菜单的时候，就要求打开⽗级菜单，然后才能点击下⾯的菜单。显然上⾯的⽅法得升级了。⽤jquery写⼀个点击事件就ok, 就不演⽰了。
2）iframe⽅法
<ul class="nav" id="side-menu">
<li>
<a href="index.html" id="firstNode" class="cur" target="menuFrame"><i class="fa fa-bar-chart-o fa-fw"></i><b>统计报表</b></a>
<ul class="nav nav-second-level">
<li><a href="import.html" target="menuFrame">进货报表</a></li>
<li><a href="export.html" target="menuFrame">出货报表</a></li>
<li><a href="check.html" target="menuFrame">⽑利报表</a></li>
</ul>
</li>
<li>
<a href="warehouse.html" target="menuFrame"><i class="fa fa-table fa-fw"></i><b>仓库管理</b></a>
<ul class="nav nav-second-level">
<li><a href="goodslist.html" target="menuFrame">商品列表</a></li>
<li><a href="check.html" target="menuFrame">盘点</a></li>
<li><a href="outbound.html" target="menuFrame">出库列表</a></li>
<li><a href="instorage.html" target="menuFrame">⼊库列表</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-edit fa-fw"></i><b>订单管理</b></a>
<ul class="nav nav-second-level">
<li><a href="orderlist.html" target="menuFrame">订单列表</a></li>
<li><a href="forms.html" target="menuFrame">采购申请</a></li>
</ul>
</li>
<li>
<a href="system.html" target="menuFrame"><i class="fa fa-wrench fa-fw"></i><b>系统设置</b></a>
<ul class="nav nav-second-level">
<li><a href="user.html" target="menuFrame">权限设置</a></li>
<li><a href="personnel.html" target="menuFrame">资料管理</a></li>
</ul>
</li>
<li>
<a href="rewritepwd.html" target="menuFrame"><i class="glyphicon glyphicon-pencil"></i><b>修改密码</b></a>
</li>
</ul>
先写出⼀个上菜的菜单。千万记住链接后⾯的target得要，⽽且名字需要⼀样，等会会⽤到
<div id="page_content">
<iframe id="menuFrame" name="menuFrame" src="index.html" scrolling="yes" frameborder="no" width="100%" heig ht="100%; float:left">
</iframe>
</div>
在内容的区域添加上⾯代码，插⼊iframe, 这⾥的name对应上⾯链接⾥⾯的name, src="index.html",
表⽰默认页是index.html, ⾄于后⾯的那些属性是控制iframe样式的。以上iframe就告⼀段落了。
⼆. ⽤ajax⽅法实现点击左边，右边出现相应的页⾯。
今年⽼⼤叫我做⼀个后台，⽽且他指出别⼈没有⽤iframe, 问我⾏不⾏。只能说⾏。没有在⽹上查看过多的资料，某天晚上突然想起ajax ⾥⾯有⼀个load⽅法，这个⽅法可以载⼊其他页⾯的内容。于是有了灵感，开始也只是尝试⼀下：
("li").on('click', function() {
var href = $(this).find("a").attr('href');
$('#mainContents').empty();
$('#mainContents').load("../new/" + href);
//阻⽌跳转
$(this).parents('li').addClass('active').siblings('li').removeClass('active');
return false;
});
点击li, 到li⾥⾯对应的链接地址，阻⽌url跳转，然后在内同区域载⼊到的url对应的地址。惊奇的发现，试验了也可⾏。然⽽新问题来了。⽤load⽅法，只能载⼊已经加载完毕的页⾯，如果我们的页⾯没有加载完毕呢，或者修改了，怎么办？？所以还是⽤ajax 吧。
var menu = $("#menuID>li h2"),
srcLi = ('ul').find('li');
<('click', function(e) {
var href = $(this).find("a").attr('href');
$('#mainContents').empty();
$.ajax({
// beforeSend: function(){
// $('#mainContents').html('正在请求');
// },
// complete: function(){
// $('#mainContents').html('加载完毕');
// },
type: "GET",
url: "../new/" + href,
success: function(data) {
$('#mainContents').append(data);
}
});
//阻⽌跳转
$(this).parents('li').addClass('active').siblings('li').removeClass('active');
return false;
});
<('click', function() {
$(this).next('ul').slideToggle(400);
$(this).stop('false').toggleClass('on');
});
以上的思路，和开始时候的load⽅法⼀样。⾸先到每⼀个li ⾥⾯对应的url, 然后清空右侧的内容，⽤ajax动态获取不同的页⾯，就追加到右侧的内容中。阻⽌跳转。
另外，附上⼀个相似的代码，这是点击⼀个树状菜单出来不同的内容。第⼀次⽤ajax调⽤json数据。着实⼩兴奋了⼀把。这个与上⾯说的内容⼀⽑钱的关系也没有，只是为了祭奠⼀下我的第⼀次⽽已
$.ajax({
html frame type: "post",
url: "../new/txt/txt1.json",
dataType: "json",
success: function(data) {
$("#blank").empty();
var employees = ployees;
$.ployees, function(k, v) {
var tpl1 =
'<div class="halfLeft">' + '<span class="aboutJobs">' + v.职位 + '</span>: ' + '<span class="aboutNames">' + v.姓名 + '</span>;<br/>' + '</div>';
$("#blank").append(tpl1);
});
}
})
调⽤的json数据为
{
"employees": [
{ "姓名": "张三", "职位":"php后台", "email": "aaaa" },
{ "姓名": "李四", "职位":"⼈事经理", "email": "bbbb" },
{ "姓名": "王五", "职位":"Harold", "email": "cccc" },
{ "姓名": "Isaac", "职位": "Asimov", "genre": "science fiction" },
{ "姓名": "Tad", "职位": "Williams", "genre": "fantasy" },
{ "姓名": "Frank", "职位": "Peretti", "genre": "christian fiction" },
{ "姓名": "Eric", "职位": "Clapton", "instrument": "guitar" },
{ "姓名": "Sergei", "职位": "Rachmaninoff", "instrument": "piano" }
],
"test": [
{ "姓名": "赵六", "职位":"php后台", "email": "aaaa" },
{ "姓名": "齐七", "职位":"⼈事经理", "email": "bbbb" },
{ "姓名": "王五", "职位":"Harold", "email": "cccc" },
{ "姓名": "Isaac", "职位": "Asimov", "genre": "science fiction" },
{ "姓名": "Tad", "职位": "Williams", "genre": "fantasy" },
{ "姓名": "Frank", "职位": "Peretti", "genre": "christian fiction" },
{ "姓名": "Eric", "职位": "Clapton", "instrument": "guitar" },
{ "姓名": "Sergei", "职位": "Rachmaninoff", "instrument": "piano" }
]
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论