后面2个li标签无效,无法显示内容?

<%@ 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个少了break,所以继续往后执行default了,break加上 

              case "#lackbookpage":
                    pathn = "app_user_lackbookpage.jsp";
                    i = 4;
                    break;
                case "#bookpagecheck":
                    pathn = "app_user_bookpagecheck.jsp";
                    i = 5;
                    break;

 

对你有帮助可以点击采纳支持下吗,谢谢~~

检查一下页面元素,看是否是宽度设置不够,被隐藏掉了。width加大试试。

 .userMenu {
            float: left;
            width: 400px;
        }

您的问题已经有小伙伴解答了,请点击【采纳】按钮,采纳帮您提供解决思路的答案,给回答的人一些鼓励哦~~

ps:开通问答VIP,享受5次/月 有问必答服务,了解详情↓↓↓

【电脑端】戳>>>  https://vip.csdn.net/askvip?utm_source=1146287632
【APP 】  戳>>>  https://mall.csdn.net/item/52471?utm_source=1146287632