Simple Tab View with Yahoo User Interface Library
In this article, I will explain how to build a YUI TabView widget completely from script.
The YUI TabView Control is designed to enable developers to create navigable tabbed views of content.
This demonstrates how to build a TabView from JavaScript.
In this article, I will explain how to build a YUI TabView widget completely from script.This demonstrates how to build a TabView from JavaScript.
For TabView component, include the following script files in your web page:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/tabview/assets/skins/sam/tabview.css">
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/connection/connection-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/tabview/tabview-min.js"></script>
putting the `yui-skin-sam` class on the <body> tag:
<body class="yui-skin-sam">
>Simple Example:
var myTabs = new YAHOO.widget.TabView("d");
<div id="d" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="""><em>TAB1</em></a></li>
<li><a href="#"><em>TAB2</em></a></li>
<li><a href="#"><em>TAB3</em></a></li>
</ul>
<div class="yui-content">
<div><p>Content1</p></div>
<div><p>Content2</p></div>
<div><p>Content3</p></div>
</div>
</div>