JSP和Bootstrap：为什么此选项卡页不起作用？

Question

因此，我一直为此感到疯狂，所以我要多加注意。

我将在此处粘贴两个单独的JSP文件。 两者都尝试使用Bootstrap中的选项卡式窗格。 其中一个有效，而另一个无效。 让我发疯的是我不知道为什么。 从字面上看，我无法发现一个微小的差异正在打破一个而不是另一个。 我不喜欢这样，我不喜欢不知道为什么有些东西不起作用。

因此，这两个文件是login.jsp和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和Bootstrap：为什么此选项卡页不起作用？

问题描述

1 个解决方案

解决方案1
0 2015-12-02 15:00:30

JSP和Bootstrap：为什么此选项卡页不起作用？

问题描述

1 个解决方案

解决方案1 0 2015-12-02 15:00:30

解决方案1
0 2015-12-02 15:00:30