I'm trying to implement the first example of tabs, keeping everything really simple, just like the very first setup of tabs. But the tabs() function doesn't do anything. all 3 tabs stay hidden all the time.
Any idea of what I am doing wrong?
Here's my code:
Any idea of what I am doing wrong?
Here's my code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.1.0/jquery.tools.min.js"></script>
</head>
<body>
<!-- tab styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" />
<!-- tab pane styling -->
<style>
/* tab pane styling */
div.panes div {
display:none;
padding:15px 10px;
border:1px solid #999;
border-top:0;
height:100px;
font-size:14px;
background-color:#fff;
}
</style>
<!-- the tabs -->
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>First tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>
<div>Third tab content</div>
</div>
<!-- This JavaScript snippet activates those tabs -->
<script>
// perform JavaScript after the document is scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});
</script>
</body>
