Show Tab Using JavaScript

by Online Tutorials Library July 14, 2022

Framework7 Show Tab using JavaScript

Framework7 facilitates you to switch or show the tab using the following JavaScript method.

Syntax:

Parameter Explanation:

tab: tab is a required HTML element or string used to open the tab.

Note: This method returns true if the tab has been changed, otherwise it returns false.

Example

Let’s take an example to demonstrate the use of the show tab using JavaScript in Framework7:

  <!DOCTYPE html>  <html>       <head>        <meta name = “viewport” content = “width = device-width, initial-scale = 1,            maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui” />        <meta name = “apple-mobile-web-app-capable” content = “yes” />        <meta name = “apple-mobile-web-app-status-bar-style” content = “black” />        <title>Show Tabs Events </title>        <link rel = “stylesheet”            href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css” />        <link rel = “stylesheet”            href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css” />     </head>       <body>        <div class = “views”>           <div class = “view view-main”>              <div class = “pages”>                 <div data-page = “home” class = “page navbar-fixed”>                                        <div class = “navbar”>                       <div class = “navbar-inner”>                          <div class = “left”> </div>                          <div class = “center”>Tabs Events</div>                          <div class = “right”> </div>                       </div>                    </div>                                        <div class = “page-content”>                       <div class = “content-block”>                          <div class = “buttons-row”>                             <a href=”#tab1″ class = “tab-link active button”>Tab 1</a>                             <a href=”#tab2″ class = “tab-link button”>Tab 2</a>                             <a href=”#tab3″ class = “tab-link button”>Tab 3</a>                          </div>                       </div>                                              <div class = “tabs”>                          <div id = “tab1” class = “tab active”>                             <div class = “content-block”>                                <p>This is tab 1 content</p>                                                                <p> <a href=”#” class = “show-tab-2”>Show Tab 2</a></p>                                                                <p>tutoraspire offers Industrial and Summer Training on     Java, PHP, .Net, Hadoop, Data Analytics, R Programming, SAP, Android, Python,     Oracle, Seleninum, Linux, C++ and many more technologies in Delhi/NCR, India.</p>                             </div>                          </div>                                                    <div id = “tab2” class = “tab”>                             <div class = “content-block”>                                <p>This is tab 2 content</p>                                                                <p> <a href=”#” class = “show-tab-3”>Show Tab 3</a></p>                                                                <p>C programming language was developed in 1972 by Dennis     Ritchie at bell laboratories of AT&T (American Telephone & Telegraph), located in U.S.A.</p>                             </div>                          </div>                                                    <div id = “tab3” class = “tab”>                             <div class = “content-block”>                                <p>This is tab 3 content</p>                                                                <p> <a href=”#” class = “show-tab-1”>Show Tab 1</a></p>                                                                <p>Android is a software package and linux based operating     system for mobile devices such as tablet computers and smartphones.     It is developed by Google and later the OHA (Open Handset Alliance).     Java language is mainly used to write the android code even though other languages can be used.</p>                             </div>                          </div>                                                 </div>                    </div>                 </div>              </div>           </div>        </div>                <script type = “text/javascript”            src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script>                   <script>           // here initialize the app           var myApp = new Framework7();             // If your using custom DOM library, then save it to $$ variable           var $$ = Dom7;             // Add the view           var mainView = myApp.addView(‘.view-main’, {              // enable the dynamic navbar for this view:              dynamicNavbar: true           });               $$(‘.show-tab-1’).on(‘click’, function () {              myApp.showTab(‘#tab1’);           });                      $$(‘.show-tab-2’).on(‘click’, function () {              myApp.showTab(‘#tab2’);           });                      $$(‘.show-tab-3’).on(‘click’, function () {              myApp.showTab(‘#tab3’);           });        </script>     </body>    </html>  

Test it Now

Next TopicSwitch Tabs From Navbar

Show Tab Using JavaScript

Framework7 Show Tab using JavaScript

Parameter Explanation:

Note: This method returns true if the tab has been changed, otherwise it returns false.

Example

AdMob with Firebase

Godot Tutorial

You may also like