您的位置：首页 > Web前端 > BootStrap

关于bootstrap中tab的使用

2016-08-02 15:58 501 查看

一引入相关文件

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

显示图如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航