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.
Answer
Most likely your jQuery is executing before the DOM is loaded, try this:
$(document).ready(function () {
$("#tabs").tabs();
});