如何在选项卡视图页面中从一个选项卡切换到另一个选项卡？
[英]How to shift from one tab to another in a page of tab view?
问题描述
我有一个jsp页面，其中包含ID为v1，v2，v3，v4的4个div部分。 每个div部件在选项卡视图中都包含一些内容。 这意味着在我的单个页面中有4个选项卡，每个表中都有一些内容。 当我尝试从一个标签切换到另一个标签时，我使用的是“ pageurl＃tab_id”技术。 但是在这种情况下，它不起作用。 当我单击链接而不是将一个选项卡移动到另一个选项卡时，它会稍微向下移动。
1 个解决方案
解决方案1
0 2016-09-08 12:11:45
这里的工作示例
括号中是特定TAB的锚点。 当您在URL和刷新页面中使用任何选项时，将自动打开相应的TAB。 让我知道它是否对您有帮助。
<!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>
如何使用Javascript从另一个页面链接到特定选项卡[保持]
[英]How to link to specific tab from another page using Javascript [on hold]
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.