Framework7 Switch Tabs from NavBar

by Online Tutorials Library July 14, 2022

Switch Tabs From Navbar

It is used to place the tabs in navigation bar that facilitates you to flip between them and looks like navigation bar.

Example

Let’s take an example to demonstrate the use of switch tabs from navbar 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>Switch tabs from Navbar </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”>                             <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 = “right”> </div>                       </div>                    </div>                                        <div class = “page-content tabs”>                       <div id = “tab1” class = “tab active”>                          <div class = “content-block”>                             <p>This is tab 1 content</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>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>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>                <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           });        </script>     </body>  </html>  

Test it Now

Next TopicTabs JavaScript Events

Framework7 Switch Tabs from NavBar

Switch Tabs From Navbar

Example

AdMob with Firebase

Godot Tutorial

You may also like