Question

我正在尝试新的Web应用程序，这是我第一次使用Bootstrap和JQuery。我已将下载的bootstrap文件夹包含在我项目的webapp文件夹中的/ resources /文件夹下。我也放了像这样的jquery-3.2.0.min.js文件/resources/bootstrap/js/jquery-3.2.0.min.js

问题是我使用引导程序样式显示选项卡但是当我单击单个选项卡时，内容无法正确显示。无论我点击什么标签，它总是只显示第一个标签的内容。

我正在使用的标签是否有任何问题，或者我需要在jQuery中使用一些额外的脚本吗？

MyJSP页面：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ page session="false" %>
<html lang="en">
<head>
    <title>Select Questions for Exams</title>
    <meta charset="utf-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/bootstrap/css/bootstrap.min.css">
</head>
<body>
<h2>
    Select Exam Questions
</h2>

<c:url var="addAction" value="/exam/addExam" ></c:url>

<form:form action="${addAction}" commandName="examPatternInit">
    <c:if test="${!empty questionsMap}">
        <div class="container">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#Test">Test</a></li>
                <c:forEach items="${questionsMap}" var="subjectEntry">
                    <li class="nav-item"><a role="tab" data-toggle="tab" href='#<c:out value="${subjectEntry.key}"/>'><c:out value="${subjectEntry.key}"/></a></li>
                </c:forEach>
            </ul>
            <div class="tab-content">
                <c:set var="firstTab" value="true"/>
                <div id='Test' class="tab-pane fade in active">
                    <h4>Testing Tab</h4>
                </div>
                <c:forEach items="${questionsMap}" var="subjectEntryTab">
                    <div id='<c:out value="${subjectEntryTab.key}"/>' class="tab-pane fade" role="tabpanel">
                        <c:forEach items="${subjectEntryTab.value}" var="question">
                            ${question}<br>
                        </c:forEach>
                    </div>
                </c:forEach>
            </div>
        </div>
    </c:if>
</form:form>
<br>
<script type="text/javascript">
$(document).ready(function(){
    $(".nav-tabs a").click(function(){
    $(this).tab('show');
    });
});
</script>
<script src="<%=request.getContextPath()%>/resources/bootstrap/js/jquery-3.2.0.min.js"></script>
<script src="<%=request.getContextPath()%>/resources/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

我还添加了为此页面生成的源代码（右键单击显示的页面和查看源代码），以确认所有选项卡的内容不同。

查看来源：

<html lang="en">
<head>
    <title>Select Questions for Exams</title>
    <meta charset="utf-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/spring-mvc-hibernate/resources/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <form id="examPatternInit" action="/spring-mvc-hibernate/exam/addExam" method="post">
        <div class="container">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#Test">Test</a></li>
                    <li class="nav-item"><a role="tab" data-toggle="tab" href='#Computer Science'>Computer Science</a></li>
                    <li class="nav-item"><a role="tab" data-toggle="tab" href='#General Knowledge'>General Knowledge</a></li>
            </ul>
            <div class="tab-content">
                <div id='Test' class="tab-pane fade in active">
                    <h4>Testing Tab</h4>
                </div>
                    <div id='Computer Science' class="tab-pane fade" role="tabpanel">
                            [Ljava.lang.Object;@1a107bd3<br>
                            [Ljava.lang.Object;@30316703<br>
                    </div>
                    <div id='General Knowledge' class="tab-pane fade" role="tabpanel">
                            [Ljava.lang.Object;@7b620eac<br>
                            [Ljava.lang.Object;@62b17d7c<br>
                    </div>
            </div>
        </div>
</form>
<br>
<script type="text/javascript">
$(document).ready(function(){
    $(".nav-tabs a").click(function(){
    $(this).tab('show');
    });
});
</script>
<script src="/spring-mvc-hibernate/resources/bootstrap/js/jquery-3.2.0.min.js"></script>
<script src="/spring-mvc-hibernate/resources/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
</body>
</html>

Result I am getting:

Answer 1

id ='计算机科学'包含空格char。尝试使用不包含空格字符的id。

该值不得包含任何空格字符。

你可以使用jstl函数lib。例如;

${fn:replace(subjectEntry.key,' ', '')}

将此转换为您的ID ComputerScience。那它可能会奏效。

Bootstrap切换选项卡在jsp页面中不起作用

1 个答案: