如何在选项卡视图页面中从一个选项卡切换到另一个选项卡？

Question

I have a jsp page which contain 4 div part having id v1,v2,v3,v4. 我有一个jsp页面，其中包含ID为v1，v2，v3，v4的4个div部分。 Every div part contains some contents in tab view. 每个div部件在选项卡视图中都包含一些内容。 that mean in my single page there is 4 tabs with some contents in each table. 这意味着在我的单个页面中有4个选项卡，每个表中都有一些内容。 When i tried to shift from one tab to another i am using the the technique "pageurl#tab_id". 当我尝试从一个标签切换到另一个标签时，我使用的是“ pageurl＃tab_id”技术。 But in this case it is not working. 但是在这种情况下，它不起作用。 when i click the link instead of shifting form one tab to another it is shifting slightly down. 当我单击链接而不是将一个选项卡移动到另一个选项卡时，它会稍微向下移动。

Answer 1

Working example here 这里的工作示例

In brackets are anchors for specific TABs. 括号中是特定TAB的锚点。 When you will use any in URL and refresh page, appropriate TAB will be opened automatically. 当您在URL和刷新页面中使用任何选项时，将自动打开相应的TAB。 Let me know whether it helped you. 让我知道它是否对您有帮助。

 <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Bootstrap tab panel examples</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> <style type="text/css"> body { padding : 10px; } #exTab1 .tab-content { color : white; background-color: #428bca; padding : 5px 15px; } #exTab2 h3 { color : white; background-color: #428bca; padding : 5px 15px; } /* remove border radius for the tab */ #exTab1 .nav-pills > li > a { border-radius: 0; } /* change border radius for the tab , apply corners on top*/ #exTab3 .nav-pills > li > a { border-radius: 4px 4px 0 0 ; } #exTab3 .tab-content { color : white; background-color: #428bca; padding : 5px 15px; } </style> </head> <body> <div class="container"><h1>Bootstrap tab panel example (using nav-pills) </h1></div> <div id="exTab1" class="container"> <ul class="nav nav-pills"> <li class="active"> <a href="#1a" data-toggle="tab">Overview (#1a)</a> </li> <li> <a href="#2a" data-toggle="tab">Using nav-pills (#2a)</a> </li> <li> <a href="#3a" data-toggle="tab">Applying clearfix (#3a)</a> </li> <li> <a href="#4a" data-toggle="tab">Background color (#4a)</a> </li> </ul> <div class="tab-content clearfix"> <div class="tab-pane active" id="1a"> <h3>Content's background color is the same for the tab</h3> </div> <div class="tab-pane" id="2a"> <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3> </div> <div class="tab-pane" id="3a"> <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3> </div> <div class="tab-pane" id="4a"> <h3>We use css to change the background color of the content to be equal to the tab</h3> </div> </div> </div> <hr></hr> <div class="container"><h2>Example tab 2 (using standard nav-tabs)</h2></div> <div id="exTab2" class="container"> <ul class="nav nav-tabs"> <li class="active"> <a href="#1" data-toggle="tab">Overview (#1)</a> </li> <li> <a href="#2" data-toggle="tab">Without clearfix (#2)</a> </li> <li> <a href="#3" data-toggle="tab">Solution (#3)</a> </li> </ul> <div class="tab-content "> <div class="tab-pane active" id="1"> <h3>Standard tab panel created on bootstrap using nav-tabs</h3> </div> <div class="tab-pane" id="2"> <h3>Notice the gap between the content and tab after applying a background color</h3> </div> <div class="tab-pane" id="3"> <h3>add clearfix to tab-content (see the css)</h3> </div> </div> </div> <hr></hr> <div class="container"><h2>Example 3 </h2></div> <div id="exTab3" class="container"> <ul class="nav nav-pills"> <li class="active"> <a href="#1b" data-toggle="tab">Overview (#1b)</a> </li> <li> <a href="#2b" data-toggle="tab">Using nav-pills (#2b)</a> </li> <li> <a href="#3b" data-toggle="tab">Applying clearfix (#3b)</a> </li> <li> <a href="#4a" data-toggle="tab">Background color (#4b)</a> </li> </ul> <div class="tab-content clearfix"> <div class="tab-pane active" id="1b"> <h3>Same as example 1 but we have now styled the tab's corner</h3> </div> <div class="tab-pane" id="2b"> <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3> </div> <div class="tab-pane" id="3b"> <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3> </div> <div class="tab-pane" id="4b"> <h3>We use css to change the background color of the content to be equal to the tab</h3> </div> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> $(document).ready(function() { if (window.location.hash != "") { $('a[href="' + window.location.hash + '"]').click() } }); </script> </body> </html>

如何在选项卡视图页面中从一个选项卡切换到另一个选项卡？

问题描述

1 个解决方案

解决方案1
0 2016-09-08 12:11:45

如何在选项卡视图页面中从一个选项卡切换到另一个选项卡？

问题描述

1 个解决方案

解决方案1 0 2016-09-08 12:11:45

解决方案1
0 2016-09-08 12:11:45