• one
    • one
      • one
      • DEVHIDE
        • Home (current)
        • About
        • Contact
        • Cookie
        • Home (current)
        • About
        • Contact
        • Cookie
        • Disclaimer
        • Privacy
        • TOS
        Login Or Sign up

        Jquery tab navigation not working properly

        148 Views Asked by Gimlore At 26 February 2022 at 14:57 2025-12-16T13:11:43.348000

        Here is the code:

        <!DOCTYPE html>

<html> 
   <body> 
    <div data-role="tabs"> 

        <div data-role="navbar"> 
          <ul> 
           <li><a href="#tabone" >one</a></li> 
           <li><a href="#tabtwo">two</a></li> 
          </ul> 
         </div> 
         
         <div id="tabone" class="ui-content"> 
         <h1>First tab contents</h1>
          <a href="index.html" style="text-decoration: none"><button class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Go back to page 1</button>
          </a>
         </div> 
         
         <div id="tabtwo" class="ui-content"> 
          <h1>Second tab contents</h1> 
         </div> 
         
    </div> 
     
</body>

        I'm not sure what's going wrong with it, I've tried a couple different ways of arranging it but it just comes out like the image below. Any help would be greatly appreciated!

        enter image description here

        html jquery jquery-ui jquery-ui-tabs
        Original Q&A
        1

        There are 1 best solutions below

        0
        Twisty Twisty On 26 February 2022 at 16:59

        Consider the following example based on the Demo: https://jqueryui.com/tabs/

        $(function() {
  $("div[data-role='tabs']").tabs();
});
        <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div data-role="tabs">
  <ul data-role="navbar">
    <li><a href="#tabone">one</a></li>
    <li><a href="#tabtwo">two</a></li>
  </ul>
  <div id="tabone" class="ui-content">
    <h1>First tab contents</h1>
    <a href="index.html" style="text-decoration: none"><button class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Go back to page 1</button></a>
  </div>
  <div id="tabtwo" class="ui-content">
    <h1>Second tab contents</h1>
  </div>
</div>

        Related Questions in HTML

        • How to store a date/time in sqlite (or something similar to a date)
        • How to use custom font during html to pdf conversion?
        • Storing the preferred font-size in localStorage
        • mp4 embedded videos within github pages website not loading
        • Scrimba tutorial was working, suddenly stopped even trying the default
        • Is there any way to glow this bulb image like a real light bulb
        • With non-graphical maps in Leaflet, zoomDelta doesn't work
        • What can I do to improve my coding on both html and css
        • Uncaught TypeError: google.maps.LatLng is not a constructor at init (script.js:7:13)
        • Bootstrap modal not showing at the desired position on a web page when the screen size is smaller
        • Displaying a Movie List on a Website Using Jinja2 and Bootstrap
        • How to redirect to thank you page after submitting a Google form embedded into a Google Site?
        • Storing selected language in localStorage
        • Fences (parenthesis, braces) in HTML and MathML
        • Understanding Scroll Anchoring Behavoir

        Related Questions in JQUERY

        • In Datatables, start value resets to 0, when column sorting
        • Bootstrap modal not showing at the desired position on a web page when the screen size is smaller
        • window.location.href redirects but is causing problems on the webpage
        • Using JQuery Date Slider
        • Storing selected language in localStorage
        • How to stop other divs from still showing when i click a different button?
        • Check multiple values with jQuery
        • Bootstrap component does not want to render in Datatables function
        • put white spaces when entering an amount moneytype symfony
        • Trouble accessing custom header in AJAX response using jQuery in Fiware Keyrock
        • I just cant make it work, HTML, JS and Firebase error
        • Didn't declared variable still not getting any error in JavaScript
        • Move element horizontally while scrolling vertically in pure JavaScript
        • allow multi carousel in same page
        • Embedded TikTok posts / thumbnail styling issue

        Related Questions in JQUERY-UI

        • jquery__WEBPACK_IMPORTED_MODULE_13__(...).sortable is not a function
        • Jquery autopopulate not displaying
        • jQuery plugin is not shown
        • How to upgrade blueimp jquery file upload to use jquery-widget 1.13
        • Set value JQUERY UI Slider with LeaFlet map
        • trying to delete existing tabs which were dynamically added
        • Jquery UI sortable addon with React not working
        • Angular.js directive does not work for uib-tooltip
        • tooltip for input fields not loading
        • How to install jq.Schedule in Vue3 + Typescript
        • JQuery - Drag, Drop and Sortable
        • tabs getting adding again and again
        • JQuery UI remove tooltip on successful input
        • jQuery Autocomplete Firing to Wrong URL
        • How to add total count in centre of the doughnut chart and bottom left and right value using Chart.js?

        Related Questions in JQUERY-UI-TABS

        • Dynamically created jQuery Tabs on ColdFusion Pages
        • jquery tabs sometimes set the iframe height to zero
        • How to activate the parent tab content using javascript?
        • jQuery UI tabs using aria-controls instead of title to have a single panel
        • Remember last clicked tab on page refresh
        • Uncaught Error: Method load does not exist on jQuery.tabs
        • How to integrate JqueryUI Tabs in Blazor webAssembly application
        • Load Php Page Inside Jquery Chrome Tabs
        • Jquery tab navigation not working properly
        • jquery-ui tab "Interactive controls must not be nested"
        • Jquery tab not showing first child selected
        • Reactjs Dynamically call components having cards under tabpanels using array
        • How to manipulate Bootstrap tabs from another page using Ajax
        • link to a page with tabbed content doesnt work
        • I want a single page scroll with top nav menu scroll and active (Active menu should be in first position scroll)

        Trending Questions

        • UIImageView Frame Doesn't Reflect Constraints
        • Is it possible to use adb commands to click on a view by finding its ID?
        • How to create a new web character symbol recognizable by html/javascript?
        • Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
        • Heap Gives Page Fault
        • Connect ffmpeg to Visual Studio 2008
        • Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
        • How to avoid default initialization of objects in std::vector?
        • second argument of the command line arguments in a format other than char** argv or char* argv[]
        • How to improve efficiency of algorithm which generates next lexicographic permutation?
        • Navigating to the another actvity app getting crash in android
        • How to read the particular message format in android and store in sqlite database?
        • Resetting inventory status after order is cancelled
        • Efficiently compute powers of X in SSE/AVX
        • Insert into an external database using ajax and php : POST 500 (Internal Server Error)

        Popular # Hahtags

        javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

        Popular Questions

        • How do I undo the most recent local commits in Git?
        • How can I remove a specific item from an array in JavaScript?
        • How do I delete a Git branch locally and remotely?
        • Find all files containing a specific text (string) on Linux?
        • How do I revert a Git repository to a previous commit?
        • How do I create an HTML button that acts like a link?
        • How do I check out a remote Git branch?
        • How do I force "git pull" to overwrite local files?
        • How do I list all files of a directory?
        • How to check whether a string contains a substring in JavaScript?
        • How do I redirect to another webpage?
        • How can I iterate over rows in a Pandas DataFrame?
        • How do I convert a String to an int in Java?
        • Does Python have a string 'contains' substring method?
        • How do I check if a string contains a specific word?
        .

        Copyright © 2021 Jogjafile Inc.

        • Disclaimer
        • Privacy
        • TOS
        • Homegardensmart
        • Math
        • Aftereffectstemplates