关于bootstrap中tab的使用

最新推荐文章于 2024-04-20 11:59:15 发布

wieyi

最新推荐文章于 2024-04-20 11:59:15 发布

阅读量4.1k

点赞数 1

一引入相关文件

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>
<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>

<%@ 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

显示图如下：

wieyi

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于bootstrap中tab的使用

一引入相关文件1、bootstrapvoucherinstant.css2、jquery-2.1.3.min.js3、bootstrap.js二、相应的jsp页面[html] view plain copy print?%@ page language="java" import="java.util.*" pageEncoding=
复制链接

扫一扫