将Bootstrap选项卡与现有的Spring MVC集成

时间:2015-08-15 09:45:28

标签: spring spring-mvc twitter-bootstrap-3 bootstrap-tabs

我有这个小型的Web应用程序,工作正常。我想现在添加bootstrap选项卡控件。 Visit this link描述了我想要做的事情。

应用程序结构如下:我有 Page1.jsp,Page2.jsp,Page3.jsp 。现在我添加了 index.jsp ,其中我放置了一个引导选项卡控件,该控件又指向这些页面。我的index.jsp看起来像这样。

         <body>
            <ul class="nav nav-pills nav-stacked col-md-2">
               <li class="active"><a href="#main_page" data-toggle="pill">Main Page</a></li>
               <li><a href="#page1" data-toggle="pill">Page1</a></li>
               <li><button id="btn_page2" class="float-left submit-button" onclick="location.href='redirect:page2'">Page2</button></li>
               <li><a href="#page3" data-toggle="pill">Page3</a></li>
               <li><a href="#test_tab" data-toggle="pill">Test Tab</a></li>
            </ul>

            <div class="tab-content col-md-10">

            <div class="tab-pane" id="main_page"> <p>This area belongs to the MAIN PAGE</p></div>
            <div class="tab-pane" id="page1"> <p>This area belongs to the PAGE 1</p></div>
            <div class="tab-pane" id="page2"> <p>This area belongs to the PAGE 2</p></div>
            <div class="tab-pane" id="page3"> <p>This area belongs to the PAGE 3</p></div>
            </div>
            <script type="text/javascript">
              function GotoPage2()
              {
                var Page2_Button = document.getElementById("btn_page2");
                Page2.location.href = "redirect:page2";
              }
             </script>
         </body>

您可能已经注意到,我尝试了不同的组合。也放置一个按钮,然后使用java脚本重定向。我甚至尝试将 Page 1.jsp 的所有JSP代码放入带 ID = page1 DIV 标签窗格中。但是仍然没有调用Spring MVC控制器。

所以我想尝试以下两种方法 1 - 单击Page1按钮/链接时,我想调用/包含Page1.jsp,控制器应该是可调用的。 2 - 如果选项1不可行,我想复制相应选项卡窗格和控制器应该从中调用的所有代码。

选项1看起来更整洁干净。我在这做错了什么?感谢您的任何意见。

0 个答案:

没有答案