CODEWITHSUNDEEP
jqueryjquery-uijquery-selectorsjquery-ui-tabsjquery-ui-theme
Piscean
Piscean

Reputation: 3079

Why jQuery ui tabs are not working?

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.

Upvotes: 3

Views: 29474

Answers (8)

8bitjunkie
8bitjunkie

Reputation: 13245

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:

  1. The JQuery UI theme in the <head> tag. I have used "base" for this example.

  2. The main JQuery JS file, moved to the bottom of the script and declared before the JQuery UI extension JS file.

  3. The JQuery UI extension JS file, moved to the bottom of the script and declared after the main JQuery JS file.

  4. 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.

  5. All version numbers agree for the JQuery dependencies.

Upvotes: 1

danwellman
danwellman

Reputation: 9263

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>

Upvotes: -1

Chase Ernst
Chase Ernst

Reputation: 1155

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

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

Upvotes: -2

pfrank
pfrank

Reputation: 2167

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!

Upvotes: 4

user2528458
user2528458

Reputation: 1

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.

Upvotes: -1

M&#225;rio Rodrigues
M&#225;rio Rodrigues

Reputation: 862

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!

Upvotes: 1

Nicolas-Verley
Nicolas-Verley

Reputation: 88

Your forgot to call jquery-ui script :

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

Upvotes: -3

Dormouse
Dormouse

Reputation: 5198

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

$(document).ready(function () {

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

});

Upvotes: 6

Related Questions