I mean really if you take the straight code out of the example and try to run this, it doesn't even work! So how are we to even use the docs? Under the "Example" here: http://docs.jquery.com/UI/Tabs#events that code works there but when I try this in my own page, I get the same issues.
<!DOCTYPE html> <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css"; rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js";></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js";></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js";></script> <script type="text/javascript"> $(document).ready(function(){ $("#tabs").tabs(); }); </script> </head> <body style="font-size:62.5%;"> <div id="tabs"> <ul> <li> #fragment-1 One </li> <li> #fragment-2 Two </li> <li> #fragment-3 Three </li> </ul> <div id="fragment-1"> <p>First tab is active by default:</p> <pre><code>$('#example').tabs();</code></pre> </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> </body> </html> expresso wrote: > > Thanks. And this is what really "gets to me" about the docs. Nowhere in > the docs does it say you need to add code to show the first default tab > and div. In fact the docs show you an example with example code of tabs > working without it. > > So then why should we assume we have to write all this extra code just to > specify the default to load and others hidden when the docs don't even > show that? > > I can see all the events, etc. on that page, but nowhere especially in the > examples does it say you have to do anything other than add the following > script to your page along with the structure of hyperlink-to-div id > matchup: > > $(document).ready(function(){ > $("#tabs").tabs(); > }); > </script> > > > so how does one "infer" to have to create all this extra code to get basic > features to work when the own docs are showing you none of that!? > > thedad...@gmail.com wrote: >> >> >> maybe this tutorial can help you . >> >> http://15daysofjquery.com/jquery-online-movie-tutorial-by-john-resig/29/ >> >> On 4月3日, 上午10时24分, expresso <dschin...@gmail.com> wrote: >>> For some reason, when my first div loads, I'm seeing all 3 text show up >>> even >>> though they're in different <div> containers: >>> >>> <script type="text/javascript"> >>> $(document).ready(function() { >>> $('#Tabs div:Form1Content').show(); >>> $('#Tabs').tabs({ fx: { opacity: 'toggle'} }); >>> }); >>> </script> >>> <div id="Tabs"> >>> <ul> >>> <li id="PTab" runat="server"> #Form1Content >>> Images/Product/tab1.gif </li> >>> <li id="OTab" runat="server"> #Form2Content >>> Images/Product/tab2.gif </li> >>> <li id="RTab" runat="server"> #Form3Content >>> Images/Product/tab3.gif </li> >>> </ul> >>> <div id="TabsMain"> >>> <div id="PContent"> >>> form >>> </div> >>> <div id="OContent"> >>> examples >>> </div> >>> <div id="RContent"> >>> test >>> </div> >>> </div> >>> </div> >>> >>> So when this loads, I see the 2 tabs and then the text shows up below >>> like >>> this: >>> >>> form >>> examples >>> test >>> >>> instead of just "form" and the rest hidden. >>> -- >>> View this message in >>> context:http://www.nabble.com/All-div-content-showing-up-in-jQuery-Tabs-tp228... >>> Sent from the jQuery General Discussion mailing list archive at >>> Nabble.com. >> >> > > -- View this message in context: http://www.nabble.com/All-div-content-showing-up-in-jQuery-Tabs-tp22860795s27240p22862216.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
