关于bootstrap中tab的使用
来源:互联网 发布:linux下如何删除用户 编辑:程序博客网 时间:2024/05/01 10:39
一引入相关文件
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>
- <%@ 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>
0 0