タブ構造を手動でコーディングしましたが、jQuery UI の既定のタブ構造に正確に従っていません。ページの読み込み時に最初のタブをデフォルトのタブとして表示したいのですが、これは起こらないようです。どんな助けでも大歓迎です。
<div class="container">
<div id="tabs">
<ul class="tabNavi">
<li><a href="#tabs_1">Tab1</a>
</li>
<li><a href="#tabs_2">Tab2</a>
</li>
</ul>
<div id="tabs_1"></div>
<div id="tabs_2" style="overflow: hidden; display: block;"></div>
</div>
</div>
私が使用したjQueryコードは次のとおりです。
tabnone: function(){
$('#tabs ul.tabNavi li a').each(function(){
$(this).removeClass('active');
var divIDS = $(this).attr('href').substr(0,10);
var divID = divIDS.split(',');
$('div#'+divID).slideUp(25);
});
},
setupNavigation: function() {
$('#tabs ul.tabNavi li a').each(function(){
var divIDS = $(this).attr('href').substr(0,10);
var divID = divIDS.split(',');
$('div#'+divID).hide();
});
$('#tabs ul.tabNavi li a').each(function(){
if ($(this).hasClass('active')) {
var divIDS = $(this).attr('href').substr(0,10);
var divID = divIDS.split(',');
$('div#'+divID).slideDown(250);
}
});
$('#tabs ul.tabNavi li a').ready(function(){
if (!$(this).hasClass('active')) {
$(this).addClass('active');
var divContent = $(this).attr('href').substr(0,10);
var div_ID = divContent.split(',');
// Show the div
alert(div_ID);
$('div#'+div_ID).show();
$('div#'+div_ID).slideDown(250);
}
});
$('#tabs ul.tabNavi li a').click(function(){
if (!$(this).hasClass('active')) {
GATECore.Pages.IndexHelper.tabnone();
$(this).addClass('active');
var divContent = $(this).attr('href').substr(0,10);
var div_ID = divContent.split(',');
// Show the div
$('div#'+div_ID).show();
$('div#'+div_ID).slideDown(250);
}
});
}