Borislav Hadzhiev
Tue Oct 19 2021·2 min read
Photo by Nine Koepfer
The "$(...).tabs is not a function" jQuery error occurs for multiple reasons:
To solve the "$(...).tabs is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library. The libraries have to be loaded only once on the page, otherwise the error is thrown.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- ✅ Load CSS file for jQuery ui --> <link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> </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>First tab</p> </div> <div id="tabs-2"> <p>Second tab</p> </div> <div id="tabs-3"> <p>Third tab</p> </div> </div> <!-- ✅ load jQuery ✅ --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ load jQuery UI ✅ --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <!-- ✅ load your JS file ✅ --> <script src="index.js"></script> </body> </html>
The order we loaded the scripts in is very important. The order is the following:
index.js
in the example).Here's the code for the index.js
file.
$(document).ready(function () { $('#tabs').tabs(); });
In our index.js
file, we wait for the DOM to be ready and initialize the tab
functionality.
If you open your browser, you'll see the tab component.
If you're still getting the error, make sure you're loading the jQuery UI library after the jQuery library.
When loading the libraries from files on your local files system, make sure that the paths you specify are correct and point to the right files.
Specifying an incorrect path to the jQuery or jQuery UI scripts is equivalent to not loading the scripts at all.