I think you assume too much... heh heh want working code? follow the examples :-)
http://www.jqueryui.com/demos/tabs/ On Apr 3, 8:58 am, expresso <dschin...@gmail.com> wrote: > I had updated my first post but does not look like it went through. The # > red and div ids are the same. I will update that. > > Second, we shouldn't have to use the same Ids as outlined in the example as > long as our jQuery is referencing the correct names one would assume > > MorningZ wrote: > > > Either one of your examples do not have a valid structure > > > your first post has > > > <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> > > > I don't know where you saw any (official) example of the structure > > with the <div> you call "TabsMain" wrapped around the content divs, > > but they shouldn't be there > > > you also don't have hyperlinks inside the <li> items (which even the > > second same code doesn't have), and even if you did, the id's you > > refer to in the <li>'s, "#Form1Content", "#Form2Content", > > "#Form3Content" don't match the IDs of the content divs of "PContent", > > "OContent", and "RContent"... so your first example doesn't have > > valid structure and isn't properly mapped, and your supposedly > > "straight from the docs" second example posted has <li>One</li>, which > > gives no clue what tabs to show/hide > > > There is absolutely no reason why this code > > > <div id="Tabs"> > > <ul> > > <li id="PTab" runat="server"> #PContent One </ > > li> > > <li id="OTab" runat="server"> #OContent Two </ > > li> > > <li id="RTab" runat="server"> #RContent Three</ > > a></li> > > </ul> > > <div id="PContent">form</div> > > <div id="OContent">examples</div> > > <div id="RContent">test</div> > > </div> > > > won't work > > > On Apr 3, 8:09 am, expresso <dschin...@gmail.com> wrote: > >> 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. > >> >> >> -- > > ... > > read more »
