<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<title>用户界面</title>
<style>
.userMenu {
float: left;
width: 200px;
}
#content {
float: left;
}
</style>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<center><h3>尊敬的用户<%=session.getAttribute("user")%>,欢迎您!!!</h3></center><br>
<div class="userWrap">
<ul class="userMenu">
<h4> <li class="current" data-id="firstpage">首页</li></h4>
<h4> <li data-id="usermsg">个人信息</li></h4>
<h4> <li data-id="stockcheck">库存查询</li></h4>
<h4> <li data-id="bookpage">订书单填写</li></h4>
<h4> <li data-id="lackbookpage">缺书登记填写</li></h4>
<h4> <li data-id="bookpagecheck">订书单审批查询</li></h4>
</ul>
<div id="content"></div>
</div>
</body>
<script>
$(function() {
$(".userMenu").on("click", "li", function() {
var sId = $(this).data("id"); //获取data-id的值
window.location.hash = sId; //设置锚点
loadInner(sId);
});
function loadInner(sId) {
var sId = window.location.hash;
var pathn, i;
switch(sId) {
case "#firstpage":
pathn = "app_user_welcome.jsp";
i = 0;
break;
case "#usermsg":
pathn = "app_user_msg.jsp";
i = 1;
break;
case "#stockcheck":
pathn = "app_user_stock.jsp";
i = 2;
break;
case "#bookpage":
pathn = "app_user_bookpage.jsp";
i = 3;
break;
case "#lackbookpage":
pathn = "app_user_lackbookpage.jsp";
i = 4;
case "#bookpagecheck":
pathn = "app_user_bookpagecheck.jsp";
i = 5;
default:
pathn = "app_user_welcome.jsp";
i = 0;
break;
}
$("#content").load(pathn); //加载相对应的内容
$(".userMenu li").eq(i).addClass("current").siblings().removeClass("current");
}
var sId = window.location.hash;
loadInner(sId);
});
</script>
</html>后面2个li标签无效,无法显示内容?
- 写回答
- 好问题 0 提建议
- 关注问题
- 邀请回答
-
3条回答 默认 最新
CSDN专家-showbo 2021-05-31 12:40关注最后2个少了break,所以继续往后执行default了,break加上
case "#lackbookpage":
pathn = "app_user_lackbookpage.jsp";
i = 4;
break;
case "#bookpagecheck":
pathn = "app_user_bookpagecheck.jsp";
i = 5;
break;对你有帮助可以点击采纳支持下吗,谢谢~~
本回答被题主选为最佳回答 , 对您是否有帮助呢?评论 打赏 举报解决 1无用