CODEWITHSUNDEEP
javascriptjqueryhtml
Michael
Michael

Reputation: 1

Trouble with jQuery tabs

I'm very new to JS, HTML, and CSS, and could really use some help with jQuery tabs. I'm currently getting "Uncaught TypeError: $(...).tabs is not a function", and I don't know what's wrong. Thank you in advance.

HTML

<div id="tabs">

 <h1>Title</h1>
  <ul class="tab">
   <li><a href="#tab1"">Tab 1</a></li>
   <li><a href="#tab2"">Tab 2</a></li>
   <li><a href="#tab3"">Tab 3</a></li>
  </ul>

  <div id="tab1">
   <p>Tab 1 content</p>
  </div>
  <div id="tab2">
   <p>Tab 2 content</p>
  </div>
  <div id="tab3">
   <p>Tab 3 content</p>
  </div>

</div>

JS

$(document).ready(function () {
 $(function () {
  $("#tabs").tabs();
 });
});

Upvotes: 0

Views: 39

Answers (2)

Mario Araque
Mario Araque

Reputation: 4572

Probably, you are not loading jQuery UI correctly. Remember that jQuery tabs is a part of jQuery UI core.

I recommend you to check it out and, if necessary add the jQuery UI from the CDN here.

Upvotes: 1

Daniele Petrarolo
Daniele Petrarolo

Reputation: 458

I don't know ths tabs jQuery plugin, but I think is a simple jQuery plugin or a jQuery UI plugin that create HTML tabs.

First of all, have you include jQuery library and jQuery UI/Tabs plugin in the <head> tag of your html page, right? Look here:

<html>
   <head>
       <script type="text/javascript" src="path to jquery.js"></script>
       <script type="text/javascript" src="path to jquery.ui/tabs.js"></script>
       <script type="text/javascript">
           Write your javascript here
       </script>
   .....
   .....
   .....

Second, but very important, try this to put this in the "Write your javascript here" position:

$(document).ready(function () {
    $("#tabs").tabs();
});

Upvotes: 0

Related Questions