关于bootstrap中tab的使用

最新推荐文章于 2021-09-25 18:53:44 发布

zihandan

最新推荐文章于 2021-09-25 18:53:44 发布

阅读量822

点赞数 1

分类专栏： Java 文章标签： bootstrap

本文链接：https://blog.csdn.net/zihandan/article/details/49364301

版权

Java 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一引入相关文件

1、bootstrapvoucherinstant.css

2、jquery-2.1.3.min.js

3、bootstrap.js

二、相应的jsp页面

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

显示图如下：