Aligning tabs upward in jQuery mobile 1.4 -

I'm new to jQuery's mobile stuff and I'm using jQuery Mobile 1.4 for my mobile web app project I am What do I want to do is to have tab material on top of the nabbar so that I can keep the contents between the nabar / tab and headers and footer in the footer.

  & lt; Div data-role = "page" id = "northet" & gt; & Lt; Div data-role = "header" data-theme = "a" & gt; & Lt; A href = "# homepage" data-roll = "button" data-icon = "home" & gt; Home & lt; / A & gt; & Lt; H1 & gt; Northern route & lt; / H1> & Lt; / Div & gt; & Lt; Div data-role = "tab" data-condition = "fixed" & gt; & Lt; Div data-role = "navbar" id = "navbar" data-icon = "top" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "# answer list" data-icon = "bullets" class = "ui-btn-active ui-state-persist" & gt; Lists & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# answermap" data-icon = "location" & gt; Maps & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt ;! - End of the North Route tab - & gt; & Lt; Div id = "answer list" category = "ui-body-d ui-content ui-state-persist" & gt; & Lt; Ul data-roll = "list view" data-icon = "wrong" data-theme = "A" & gt; & Lt; Li & gt; & Lt; A href = "# debubibanos" & gt; & Lt; Img src = "images / list_thumb / debrelibanos_thumb.jpg" alt = "debrelibanos" & gt; & Lt; H3 & gt; Debre Libonos & lt; / H3 & gt; & Lt; P & gt; 103 Km & lt; / P & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# PortugueseGuys" & gt; & Lt; Img src = "images / list_thumb / portugesebridge_thumb.jpg" alt = "PortugueseGridge" & gt; & Lt; H3 & gt; Portuguese Bridge & lt; / H3 & gt; & Lt; P & gt; Km & lt; / P & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# ABBegerg" & gt; & Lt; Img src = "images / list_thumb / abbaygoarge_thumb.jpg" alt = "abbaygoarge" & gt; & Lt; H3 & gt; Blue Neal Gorez & lt; / H3 & gt; & Lt; P & gt; 103 Km & lt; / P & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#bbayfall" & gt; & Lt; Img src = "images / list_thumb / bulefall_thumb.jpg" alt = "abbayfall" & gt; & Lt; H3 & gt; Blue Nile Fall & lt; / H3 & gt; & Lt; P & gt; 592 km & lt; / P & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# gefersa" & gt; & Lt; Img src = "images / list_thumb / gefersa_thumb.jpg" alt = "Gefersa" & gt; & Lt; H3 & gt; Gefersa Reservoir & lt; / H3 & gt; & Lt; P & gt; 18 Kilometers & lt; / P & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div id = "northmap" class = "ui-body-d ui-content" & gt; & Lt; H3 & gt; Map of Northern Ethiopia & lt; / H3 & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div data-role = "footer" data-position = "fixed" & gt; & Lt; H4 & gt; Footer & lt; / H4 & gt; & Lt; / Div & gt;    
 
 
 You can move the tab button in the footer, but then you can add javascript To hide the button and show the tabs. For your example, you can add a second class for all tabs buttons ( tabButton ) and for all views which should be hidden and shown ( tabView ).  
 Then in the  pagecreate  event, hide all the views except the first default view that should be visible. Handle click event on the second tab tab:  
  $ (document) .on ("pagecreate", "#northet", function () {// only visible visible $ ("$ (" $ {"(" .btn-active "); $ (" ("Href"); $ (href.substr (href). .indexOf ('#'). Show (); $ (this). AddClass ("Ui-btn-active"); return false;})}};   
 when If a button is clicked, remove the active square from the button, to hide all the ideas, find what should be shown (clicked buttons Href), show that view and the current button is active.  
 
 Here