Yahoo! UI Libraryを利用したタブメニュー

今回はYahoo! UI Libraryを利用したタブメニューです。ちょっとタブの上の方が変ですがこのブログのCSSがどこかでけんかしているせいだと思います。
まず外部のJavaScriptをもりもり読み込みます。
<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>
<div class=" yui-skin-sam">
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1">タブのタイトル</a></li>
<li><a href="#tab2">タブのタイトル</a></li>
<li><a href="#tab3">タブのタイトル</a></li>
</ul> 
<div class="yui-content">
<div>タブの中身</div>
<div>タブの中身</div>
<div>タブの中身</div>
</div>
</div>
</div>
最後にこのようにJavaScriptを書きます。
<script>
(function() {
var tabView = new YAHOO.widget.TabView('demo');
})();
</script>

この他にもこのブログでタブメニューを紹介していますのでぜひご参考に。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加