Jquery: Help With Innitializing (I think)
Please help me. I am
TOTALLY new to jQuery and need your advice.
Take a look at the following two examples:
EXAMPLE 1 (Undesired Effect
):
EXAMPLE 2 (Desired Effect
):
I am currently working on a HTML/CSS Tab interface that is using jQuery. I downloaded the original example files from somewhere that used an old version of jQuery (version dated back from 2006).
When I open the
TABS.HTM file in the browser, I see the desired effect (as in
Example 2 above), where the first tab is auto selected. Nice!
Now, when I updated the jQuery .JS library with the latest build (version 1.3.2), I get the undesired effect, as illustrated in
Example 1, where the first tab isn't auto selected. Yuck!
PLEASE HELP ME!
I have absolutely no idea what is going on and I am totally new to jQuery. I am assuming with the new version of jQuery, the JS initiator code is different. Please can someone take a look? I've included the old
jquery-Version2006.js and the new
jquery-1.3.2.min.js libraries in the attached zip.
You can download the example files here:
http://hotfile.com/dl/7659319/7e95c76/jQuery_Tabs.zip.html
or from:
http://depositfiles.com/files/ndrb2w18x
or from:
http://www.megaupload.com/?d=R5WFLSLT
In a nutshell, here is the HTML:
-
<html>
<head>
<title>jQuery Tabs</title>
<link rel="stylesheet" href="tabs.css" type="text/css" />
<script src="jquery-Version2006.js" type="text/javascript"></script>
<!--
CHANGE ABOVE FROM "jquery-Version2006.js" to "jquery-1.3.2.min.js"
AND YOU'LL FIND THE FIRST TAB DOESN'T AUTO SELECT WHEN PAGE IS LOADED
-->
<script src="tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.tabs("Tab");
});
</script>
</head>
<body>
<div id="Tab">
<ul class="Tabs">
<li><a href="#Tab1">Tab 1</a></li>
<li><a href="#Tab2">Tab 2</a></li>
<li><a href="#Tab3">Tab 3</a></li>
</ul>
<div id="Tab1" class="TabBody">
<b>First Tab</b><br />
Content<br />
</div>
<div id="Tab2" class="TabBody">
<b>Seconds Tab</b><br />
Content<br />Content<br />
</div>
<div id="Tab3" class="TabBody">
<b>Third Tab </b><br />
Content<br />Content<br />Content<br />
</div>
</div>
Thank you in advance.
Cassy
xxx