Question

所以，我一直在为此疯狂，所以我要去寻找额外的一双眼睛。

我要在这里粘贴两个单独的JSP文件。两者都尝试使用Bootstrap中的选项卡式窗格。其中一个有效，另一个无效。什么让我发疯的是我无法弄清楚为什么。我确实无法找到一个与众不同的差别。我不喜欢这样，我不想知道为什么有些东西不起作用。

所以，这两个文件是login.jsp＆amp; login2.jsp。 login2.jsp我是手写的，它不起作用。 login.jsp我从一个例子中复制并粘贴，只是更改了值（例如，选项卡上的名称）。它有效。

我确定那里可能有一些小问题是问题的根源，但是我无法找到它并且它让我发疯。无论如何，任何帮助将不胜感激。

login.jsp（复制/粘贴的那个，效果很好）

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page session="false" %>
<%@ include file="stub/jstl-stub.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><fmt:message key="welcome-page-title" /></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script type="text/javascript" src="./jsresources/bootstrap.js">    </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="./jsresources/bootstrap-tab.js"></script>

</head>

<body>

<div id="welcome_title">
    <h1><fmt:message key="welcome-title"/></h1>
</div>

<h3><fmt:message key="welcome-login-header"/></h3>

<div class="container">
    <div id="content">
        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            <li class="active"><a href="#admin" data-toggle="tab">Administrator</a></li>
            <li><a href="#student" data-toggle="tab">Student</a>
        </ul>
        <div id="my-tab-content" class="tab-content">
            <div class="tab-pane active" id="admin">
                <h3>Admin</h3>
            </div>
            <div class="tab-pane" id="student">
                <h3>Student</h3>
            </div>
        </div>
    </div>
</div>

</body>
</html>

login2.jsp（我手工编写的那个，它不起作用）

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page session="false" %>
<%@ include file="stub/jstl-stub.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><fmt:message key="welcome-page-title" /></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script type="text/javascript" src="./jsresources/bootstrap.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="./jsresources/bootstrap-tab.js"></script>

</head>

<body>

<div id="welcome_title">
    <h1><fmt:message key="welcome-title"/></h1>
</div>

<h3><fmt:message key="welcome-login-header"/></h3>

<div class="container">
    <div id="content">
        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            <li class="active"><a href="#admin" data-toggle="tab">Administrator</a></li>
            <li><a href="#student" data-toggle="tab">Student</a></li>
        </ul>
        <div id="my-tab-content" class="tab-content">
            <div class="tab-pane active" id="admin">
                <h3>Admin</h3>
            </div>
            <div class="tab-pane" id="student">
                <h3>Student</h3>
            </div>
        </div>
    </div>
</div>

 </body>
</html>

Answer 1

我找到的唯一区别就是这一行：

<li><a href="#student" data-toggle="tab">Student</a></li>

标记未在第一个文件中关闭。

JSP＆amp; Bootstrap：为什么这个标签页不起作用？

1 个答案: