tabs is required for jQuery.fn.tabs
<Require feature="tabs" />
Displaying Tabs
jQuery.fn.tabs can be used to display tabs. The full range of tabs is represented by the ul, li, and a tags, and the tab content can be specified by the "a" tag. Moreover, the tab tool chip can be specified by the a tags' title attributes.
<script type="text/javascript">
jQuery(function($) {
$('#tabs').tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#dog" title="tab of dog">DOG</a></li>
<li><a href="#cat" title="tab of cat">CAT</a></li>
</ul>
<div id="dog">contents of dog</div>
<div id="cat">contents of cat</div>
</div>
Moreover, jQuery.fn.tabs can specify the callback function to handle the tab switching event. At this point, "this" can be used to display the contents of the switched tab.
$('#tabs').tabs(function() {
$(this).text('id: ' + this.id);
$(window).adjustHeight();
});Callback function arguments can also be used. At this point, the number corresponding to "i" is displayed and content is used to display the contents of the switched tab.
$('#tabs').tabs(function(i, content) {
$(content).text('i: ' + i);
$(window).adjustHeight();
});
タブ切り替えがjQueryのHoverメソッドでできました。
jQuery("#tl_0_header td[title]").hover(function(){ var dispindex = ""; var tabIndexText = jQuery(this).html();//タブの中のテキスト取得 if(tabIndexText == "tabName2"){//取得したテキストを判別 dispindex=2; }else if(tabIndexText == "tabName1"){ dispindex=1; }else{ dispindex=0; } tabs.setSelectedTab(dispindex);//タブ切り替え実行 });