jquery ui tabs not working
I have the following script which does not work. it should be using jquery tabs, but the links are not converting to tabs for some reason:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" language="javascript">
$(document).ready(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>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, </p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus </p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. </p>
</div>
</div>
</body>
</html>
Answer
For your document on jsfiddle, you need to enter your page in the format that Fiddle expects. Only the HTML in the HTML panel and only the JS in the javascript panel. Your HTML should only include what goes inside the body element. Your JS should only include what goes inside the script tag. You shouldn't include DOCTYPE, body, or html elements. You shouldn't include the script tag itself. See the documents here: http://doc.jsfiddle.net/basic/introduction.html#entering-code. The code will work if you do this.
Once you have that done, you only need to include/reference the correct CSS that does the styling and it will display as a tabbed interface. For your standalone document, this is all that needs to be done.