How to shift from one tab to another in a page of tab view?
Question
I have a jsp page which contain 4 div part having id v1,v2,v3,v4. Every div part contains some contents in tab view. that mean in my single page there is 4 tabs with some contents in each table. When i tried to shift from one tab to another i am using the the technique "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.
1 answers
solution1
0 2016-09-08 12:11:45
Working example here
In brackets are anchors for specific TABs. When you will use any in URL and refresh page, appropriate TAB will be opened automatically. 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to redirect an user from one tab to another tab of other page?
How to send value from one tab to another tab in react native
How to copy text from one tab to another?
How to focus of tab from one element to another?
How to differentiate focus in event from TAB and Shift TAB?
How to change to another tab from inside of a tab?
How to select a browser tab from another tab?
How to retrieve input text value from another tab view
How to update a tab view from child page in Angular.JS
How to link to specific tab from another page using Javascript [on hold]
Related Tags