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