關於bootstrap中tab的使用
阿新 • • 發佈：2019-01-26
一引入相關檔案
1、bootstrapvoucherinstant.css
2、jquery-2.1.3.min.js
3、bootstrap.js
二、相應的jsp頁面
[html] view plain copy print?- <%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <basehref="<%=basePath%>">
- <title>My JSP 'bootstrap.jsp' starting page</title>
- <metahttp-equiv="pragma"content="no-cache">
- <metahttp-equiv="cache-control"content="no-cache">
- <metahttp-equiv="expires"content="0">
- <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
- <metahttp-equiv="description"content="This is my page">
- <linkrel="stylesheet"type="text/css"href="bootstrap/bootstrapvoucherinstant.css"/>
- <scripttype="text/javascript"src="bootstrap/jquery-2.1.3.min.js"></script>
- <scripttype="text/javascript"src="bootstrap/bootstrap.js"></script>
- </head>
- <body>
- <divclass="body_div">
- <divclass="navigation">
- 標題部分
- </div>
- <ulid="myShopTab"class="nav nav-tabs">
- <liclass="active">
- <ahref="#tab1"data-toggle="tab">群組記錄</a>
- </li>
- <li>
- <ahref="#tab2"data-toggle="tab">客服記錄</a>
- </li>
- </ul>
- <divid="myTabContent"class="tab-content">
- <divclass="tab-pane fade in active"id="tab1"></div>
- <divclass="tab-pane fade"id="tab2">
- <iframesrc="index.jsp"frameborder="0"scrolling="no"marginheight="0"marginwidth="0"width="100%"height="450px;"></iframe>
- </div>
- </div>
- </div>
- </body>
- </html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'bootstrap.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrapvoucherinstant.css"/>
<script type="text/javascript" src="bootstrap/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.js"></script>
</head>
<body>
<div class="body_div">
<div class="navigation">
標題部分
</div>
<ul id="myShopTab" class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">群組記錄</a>
</li>
<li>
<a href="#tab2" data-toggle="tab">客服記錄</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab1"></div>
<div class="tab-pane fade" id="tab2">
<iframe src="index.jsp" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="100%" height="450px;"></iframe>
</div>
</div>
</div>
</body>
</html>
部署好工程在位址列測一下：http://localhost:8080/Mytest/bootstrap.jsp
顯示圖如下：
