Yahoo YUI函式庫：標籤選單tabview
標籤選單tab menu或是叫tab view是現在製作網頁很流行的小技巧，它可以在版面的有限空間內，塞進更多內容，許多知名的Ajax函式庫都有提供這樣的功能，今天來介紹yahoo yui tabview的基本製作方式。
1. 在<head>置入yui tabview所需的檔案，如下：
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/tabview/assets/skins/sam/tabview.css" /> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/tabview/tabview-min.js"></script>
2. 在想要的位置設定tabview的選單項目及內容
<div class="yui-skin-sam">
<!-- 設定這個標籤選單的id為demo，標籤2的selected表示為預設顯示項目-->
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>標籤1</em></a></li>
<li class="selected"><a href="#tab2"><em>標籤2</em></a></li>
<li><a href="#tab3"><em>標籤3</em></a></li>
</ul>
<div class="yui-content">
<div id="tab1"><p>內容1</p></div>
<div id="tab2"><p>內容2</p></div>
<div id="tab3"><p>內容3</p></div>
</div>
</div>
</div>
<script>
(function() {
//啟動demo的tabview功能
var tabView = new YAHOO.widget.TabView("demo");
})();
</script>
3. 結果如圖（點選跳出demo）：
其它：
．改變字體大小，在<head>設定如：
<style>#demo {font-size:20px;}</style>
．改變內容背景顏色，在<head>設定如：
<style>#demo .yui-content{background:#fff;}</style>
