Designers and Developers Come Here

YUI TabView Control Not Working

By Egypt Web Design ⋅ December 21, 2008 ⋅ Email This Post Email This Post ⋅ Print This Post Print This Post ⋅ Post a comment

YUI TabView Control Not Working

if you came across the YUI TabView Control you will find it not working!

Well i want to use it in one project so i spend like 5 minutes to check what’s the problem with it!!!!

and i discovered that it’s not working because of the Basic Markup:

<div id="demo" class="yui-navset yui-navset-top">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li title="active" class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li title="" class=""><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
&lt;div <strong>style="display: none;"</strong> id="tab1"&gt;&lt;p&gt;Tab One Content&lt;/p&gt;&lt;/div&gt;
&lt;div <strong>style="display: block;"</strong> id="tab2"&gt;&lt;p&gt;Tab Two Content&lt;/p&gt;&lt;/div&gt;
&lt;div <strong>style="display: none;"</strong> id="tab3"&gt;&lt;p&gt;Tab Three Content&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

Here is the working version (if you didn’t notice you only have to remove the style inside tab contents):

&lt;div id="demo" class="yui-navset yui-navset-top"&gt;
  &lt;ul class="yui-nav"&gt;
    &lt;li&gt;&lt;a href="#tab1"&gt;&lt;em&gt;Tab One Label&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li title="active" class="selected"&gt;&lt;a href="#tab2"&gt;&lt;em&gt;Tab Two Label&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li title="" class=""&gt;&lt;a href="#tab3"&gt;&lt;em&gt;Tab Three Label&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="yui-content"&gt;
&lt;div <strong>style=""</strong> id="tab1"&gt;&lt;p&gt;Tab One Content&lt;/p&gt;&lt;/div&gt;
    &lt;div <strong>style=""</strong> id="tab2"&gt;&lt;p&gt;Tab Two Content&lt;/p&gt;&lt;/div&gt;
    &lt;div <strong>style=""</strong> id="tab3"&gt;&lt;p&gt;Tab Three Content&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

Now it’s going to work as you expect! Make sure you check The Working Version

I Love Social Bookmarking
SubscribeDiggdel.icio.usFacebookRedditStumbleUponTechnorati

Discussion

Comments are disallowed for this post.

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

Comments are closed.

Our Sponsors:

Latest Comments