JSP & Bootstrap: Why won't this tabs page work?
Question
So, I've been driving myself crazy over this, so I'm going for an extra set of eyes.
I'm going to paste two separate JSP files here. Both try to use a tabbed pane from Bootstrap. One of them works, and the other doesn't. What's driving me crazy is I can't figure out why. I literally can't find that one little difference that's breaking one and not the other. I don't like this, I don't like not knowing why something doesn't work.
So, the two files are login.jsp & login2.jsp. login2.jsp I wrote by hand, and it doesn't work. login.jsp I copied and pasted from an example, and just changed the values (eg, the names on the tabs). It works.
I'm sure there's probably some tiny typo in there that's the source of the issue, but I can't find it and it's driving me crazy. Anyway, any help would be appreciated.
login.jsp (the one that was copied/pasted, works perfectly)
<%@ 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 (the one I wrote by hand, that's not working)
<%@ 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>
1 answers
solution1
0 2015-12-02 15:00:30
The only difference I found is at this line:
<li><a href="#student" data-toggle="tab">Student</a></li>
The tag is not closed in the first file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.