Klaus, a couple points:
First, let me state that it appears that I do see content being changed on click of each tab. That is NOT my problem here. 1) if it's the span tags you're referring to, I tried that by wrapping the spans either around text or an image and it made no diff. When I click on a tab, I do see the content dive changing..the problem is still that the dive are not hidden and all 3 referenced divs are exposed as you can see in my screen shot. So the clicking seems to work...it's that the divs are not being hidden/shown correctly 2) I even tried the code as I stated right out of the example on the jquery tabs page. Same results. Now you're saying I changed something there? No way man. So maybe you don't understand MY problem still? Yes frustrated and sometimes we should all be allotted to be a little human at times ay? Klaus Hartl-4 wrote: > > > There's no need for all this ranting. You're simply not meeting the > markup requirements to make the tabs work. > > A tab has to look like: > > <li> #fragment-identifier A Tab </li> > > I m pretty sure the documentation is showing this fact and I don't > understand why you took "straight code out of the example" and then > changed it to not work. Indeed "Nowhere in > the docs does it say you need to add code to show the first default > tab and > div." because you don't need to as long as you're using the proper > markup. > > > --Klaus > > > > On 3 Apr., 07:32, expresso <dschin...@gmail.com> wrote: >> 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>One</li> >> <li>Two</li> >> <li>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> >> >> 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!? >> >> If I have to hack in more jQuery to do this, then the docs should be >> forthcoming and tell me this instead of giving me examples that >> essentially >> point me in a direction of "it works like this" instead of "you need to >> code >> a ton more to get this to work like this" type of deal. How do I know >> that? >> I'm not trying to do anything here outside of get the basic tabs working >> and >> default <div> to show! By what I infer from the docs, this is all I >> need! >> >> I mean is that example ONLY working because it's using the jquery css >> (<link >> type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css"; >> rel="stylesheet" />) in there and the jQuery tabs plugin can work like >> that >> IF you only use that css and anything outside that you must code your own >> logic to your own css? I don't get this or infer 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-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-tp22860795s27240p22867163.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
