Why jQuery ui tabs are not working?

Question

Why jQuery ui tabs are not working?

29.2k Views Asked by Piscean At 20 October 2024 at 08:42

I found the same question here jquery ui tabs not working but it didn't help me. This is my HTML which should create the tabs but it's not working:

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs</title>
        <link rel="stylesheet" href="jquery.ui.all.css">
    <script src="jquery-1.7.js"></script>
    <script src="jquery.ui.core.js"></script>
    <script src="jquery.ui.widget.js"></script>
    <script src="jquery.ui.tabs.js"></script>

    <script>
        $(function() {
            $( "#tabs" ).tabs();
        });
   </script>
</head>
<body>

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
    <p>Content 1.</p>
</div>
<div id="tabs-2">
    <p>Content 2.</p>
</div>
<div id="tabs-3">
    <p>Content 3.</p>
</div>
</div>

</body>
</html>

and output of this html is this:

     . Nunc tincidunt
     . Proin dolor
     . Aenean lacinia
 Content 1.

 Content 2.

 Content 3.

list elements should be displayed as tabs but they displaying as list. Why is that so? Thanks in advance.

Original Q&A

There are 8 best solutions below

danwellman On 29 November 2011 at 10:08

It is best practice to link to the scripts as close to the end of the body as possible.

The script is running before the HTML has loaded, so when you call $("#tabs").tabs() there is no element with an id of tabs on the page yet.

Try moving the scripts to the end of the page and see if that helps:

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs</title>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
       </ul>
       <div id="tabs-1">
           <p>Content 1.</p>
       </div>
       <div id="tabs-2">
           <p>Content 2.</p>
       </div>
       <div id="tabs-3">
           <p>Content 3.</p>
       </div>
   </div>
   <script src="jquery-1.7.js"></script>
   <script src="jquery.ui.core.js"></script>
   <script src="jquery.ui.widget.js"></script>
   <script src="jquery.ui.tabs.js"></script> 
   <script>
       $(function() {
           $( "#tabs" ).tabs();
       });
   </script>
</body>
</html>

Dormouse On 29 November 2011 at 10:23

Most likely your jQuery is executing before the DOM is loaded, try this:

$(document).ready(function () {

    $("#tabs").tabs();

});

Nicolas-Verley On 29 November 2011 at 10:35

Your forgot to call jquery-ui script :

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Mário Rodrigues On 29 November 2011 at 10:41

Try to use these scripts instead of yours (just replace the bottom lines):

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
   <script type="text/javascript">
       $(function() {
           $("#tabs").tabs();
       });
   </script>

Also change the CSS file source to this one:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />

I'm guessing you are not specifying well the JS Source for jQuery's. Hope it helps!

8bitjunkie On 23 February 2017 at 01:51

HTML is parsed top-down. Your function refers to an ID called tabs before it is rendered.

It is also not clear from your imports that your JQuery dependencies are all at the same version.

Here is a SSCCE:

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>

  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">1</a></li>
      <li><a href="#tabs-2">2</a></li>
      <li><a href="#tabs-3">3</a></li>
    </ul>
    <div id="tabs-1">
      <p>Text 1</p>
    </div>
    <div id="tabs-2">
      <p>Text 2</p>
    </div>
    <div id="tabs-3">
      <p>Text 3</p>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</body>
</html>

Note the following:

The JQuery UI theme in the <head> tag. I have used "base" for this example.
The main JQuery JS file, moved to the bottom of the script and declared before the JQuery UI extension JS file.
The JQuery UI extension JS file, moved to the bottom of the script and declared after the main JQuery JS file.
The block of Javascript which calls the tabs function on the container has been moved to a position the script after the container has been created in HTML and after the JQuery JS dependencies have been loaded.
All version numbers agree for the JQuery dependencies.

user2528458 On 27 June 2013 at 14:14

Make completely sure that you are not loading the jquery javascript twice in your page. If you are loading it more than once or loading 2 different versions of the script, it will cause this problem.

Chase Ernst On 14 July 2015 at 20:33

I had this same problem, and this solved it for me:

<a href="#divdata" data-ajax="false">link</a>

**pfrank** · Accepted Answer

pfrank On 22 July 2013 at 15:30 BEST ANSWER

If you haven't found an answer, this is caused by either old or mismatched jQuery/jQuery-ui versions. Update both and should work like a charm!

Why jQuery ui tabs are not working?

There are 8 best solutions below

Related Questions in JQUERY

Related Questions in JQUERY-UI

Related Questions in JQUERY-SELECTORS

Related Questions in JQUERY-UI-TABS

Related Questions in JQUERY-UI-THEME

Trending Questions

Popular # Hahtags

Popular Questions