From 221c14d5d3ca32f8bb2f0149ada0185544fd01b5 Mon Sep 17 00:00:00 2001
From: 10295 <1029559041@qq.com>
Date: Sun, 13 May 2018 16:47:26 +0800
Subject: [PATCH] =?UTF-8?q?bootstrap=E8=8F=9C=E5=8D=95=E6=A0=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/main/webapp/WEB-INF/jsp/index.jsp | 21 ++++++++++++---------
 web/src/main/webapp/WEB-INF/jsp/menu.jsp  | 17 +++++++++++++----
 web/src/main/webapp/WEB-INF/jsp/test.jsp  | 12 ++++++------
 web/src/main/webapp/WEB-INF/jsp/test2.jsp | 23 ++++++++++++++++++++++-
 4 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/web/src/main/webapp/WEB-INF/jsp/index.jsp b/web/src/main/webapp/WEB-INF/jsp/index.jsp
index 6affd78..b5ab4e5 100644
--- a/web/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/web/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -29,12 +29,15 @@
 
             $("#tabs").on('click', 'button', function () {
                 $(this).addClass('active');
+                $($(this).attr('href')).addClass('active show');
+                $($(this).attr('href')).siblings().removeClass('active show')
                 $(this).siblings().removeClass('active');
 
             });
 
             $("#tabs").on('click', 'i', function () {
                 $(this).parent().remove();
+                $($(this).parent().attr('href')).remove();
             });
         });
     </script>
@@ -50,7 +53,7 @@
             <span id="navSpan"><b>Close</b>&nbsp;<i class="fas fa-angle-double-up"></i></span>
         </button>
 
-        <div class="btn-group" role="group" aria-label="Basic example" id="tabs">
+        <div class="btn-group" aria-label="Basic example" id="tabs">
 
         </div>
 
@@ -63,19 +66,19 @@
     <div class="show" id="navbarNavDropdown">
         <div class="row">
 
-            <c:import url="/menu?firstResult=0&maxResults=0"></c:import>
-
-
-            <div class="col-10">
-                <!-- 16:9 aspect ratio -->
-                <div class="embed-responsive embed-responsive-16by9">
-                    <iframe id="myIframe" class="embed-responsive-item" src="/test"></iframe>
-                </div>
+            <div class="col-2">
+                <c:import url="/menu?firstResult=0&maxResults=0"></c:import>
             </div>
+
         </div>
 
+        <div class="row-fluid tab-content" id="nav-tabContent">
+            <!-- 16:9 aspect ratio -->
+
+        </div>
     </div>
 
+
 </div>
 
 
diff --git a/web/src/main/webapp/WEB-INF/jsp/menu.jsp b/web/src/main/webapp/WEB-INF/jsp/menu.jsp
index ffc9ab9..9a55c77 100644
--- a/web/src/main/webapp/WEB-INF/jsp/menu.jsp
+++ b/web/src/main/webapp/WEB-INF/jsp/menu.jsp
@@ -54,13 +54,22 @@
                 $(menuId).click(function () {
                     btnId='#btn'+$(this).data('id');
                     if ($(btnId).length == 0) {
-                        $("#tabs").append('<button type="button" id="' + btnId.substr(1) + '" class="btn btn-secondary btn-lg">' + $(this).text() + '\n' +
+                        $("#tabs").append('<button type="button" id="' + btnId.substr(1) + '" class="btn btn-secondary btn-lg" href="#iframe'+$(this).data('id')+'">' + $(this).text() + '\n' +
                             '            <i class="fas fa-times" style="display: none"></i>\n' +
                             '        </button>')
                     }
 
-                    $(top.document).find('.navbar>' + btnId).click();
-                    $(top.document).find('#myIframe').attr('src', $(this).data('href'));
+                    $(btnId).click();
+
+                    iframe='#iframe'+$(this).data('id');
+                    if ($(iframe).length == 0) {
+                        $(top.document).find('#nav-tabContent').append('<div id="' + iframe.substr(1) + '" class="tab-pane fade embed-responsive embed-responsive-16by9" >\n' +
+                            '                <iframe class="embed-responsive-item" src="'+$(this).data('href')+'"></iframe>\n' +
+                            '            </div>');
+                    }
+
+                    $(iframe).addClass('active show');
+                    $(iframe).siblings().removeClass('active show');
                 });
             }
         }
@@ -73,7 +82,7 @@
     });
 </script>
 
-<div class="list-group col-2 float-left" id="list-tab" role="tablist">
+<div class="list-group" id="list-tab" role="tablist">
 
 </div>
 
diff --git a/web/src/main/webapp/WEB-INF/jsp/test.jsp b/web/src/main/webapp/WEB-INF/jsp/test.jsp
index 8286325..5231d73 100644
--- a/web/src/main/webapp/WEB-INF/jsp/test.jsp
+++ b/web/src/main/webapp/WEB-INF/jsp/test.jsp
@@ -16,22 +16,22 @@
 <div class="container-fluid">
     <div class="row">
         <div class="col-sm">
-            One of three columns
+            test
         </div>
         <div class="col-sm">
-            One of three columns
+            test
         </div>
         <div class="col-sm">
-            One of three columns
+            test
         </div>
         <div class="col-sm">
-            One of three columns
+            test
         </div>
         <div class="col-sm">
-            One of three columns
+            test
         </div>
         <div class="col-sm">
-            One of three columns
+            test
         </div>
     </div>
 </div>
diff --git a/web/src/main/webapp/WEB-INF/jsp/test2.jsp b/web/src/main/webapp/WEB-INF/jsp/test2.jsp
index daf4ded..a1ff759 100644
--- a/web/src/main/webapp/WEB-INF/jsp/test2.jsp
+++ b/web/src/main/webapp/WEB-INF/jsp/test2.jsp
@@ -13,6 +13,27 @@
     <c:import url="head.jsp"/>
 </head>
 <body>
-    <h1>test2.jsp</h1>
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm">
+            test2
+        </div>
+        <div class="col-sm">
+            test2
+        </div>
+        <div class="col-sm">
+            test2
+        </div>
+        <div class="col-sm">
+            test2
+        </div>
+        <div class="col-sm">
+            test2
+        </div>
+        <div class="col-sm">
+            test2
+        </div>
+    </div>
+</div>
 </body>
 </html>