Why jQuery ui tabs are not working?
28,378
Solution 1
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!
Solution 2
Most likely your jQuery is executing before the DOM is loaded, try this:
$(document).ready(function () {
$("#tabs").tabs();
});
Solution 3
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!
Comments
-
Piscean over 4 years
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.