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.

Comments are closed.

Our Sponsors:

Latest Comments