JavaScript を介してタブを実装している Web サイトに取り組んでおり、「次の」タブに移動するボタンを作成したいと考えています。タブIDをjavascriptにハードコードする必要があるかどうかは気にしませんが、タブを進めることができるようにしたいと思います。
EDIT3:これは私が持っているもののjfiddle実装です。次のボタンで、タブをクリックするのと同じようにタブを進められるようにしたいだけです。ありがとう!
ボタンなしで、現在作業中のタブ用に私が持っているコードは次のとおりです。
var tabContents = $(".tab_content").hide(),
tabs = $("ul.tabs li");
tabs.first().addClass("active").show();
tabContents.first().show();
tabs.click(function() {
var $this = $(this),
activeTab = $this.find('a').attr('href');
if(!$this.hasClass('active')){
$this.addClass('active').siblings().removeClass('active');
tabContents.hide().filter(activeTab).fadeIn();
}
return false;
});
そこで、ボタンの tabs.click に似たものを実装しようとしています。これまでに得たものは次のとおりです。
var tabbtn = $(".tabbutton");
tabbtn.click(function() {
var listItem = document.getElementById('tab2');
var $this = $(this),
activeTab = $this.find('a').attr('href');
tabContents.hide().filter("#tab2").fadeIn();
return false;
});
これにより、実際には右側のタブの情報が表示されますが、強調表示されるタブ ヘッダーは変更されません。
誰にもアイデアはありますか?助けてくれてありがとう!