私が見つけたjqueryでこのタブスクリプトに追加しようとしました。必要以上に複雑にしてしまったようです。これはjqueryタブで非常に簡単に実行できることを知っていますが、学習するために独自のバージョンを作成しようとしました. 垂直タブは正常に機能しますが、垂直ナビゲーション ボタンと同じことを行い、背景色などを含む垂直ナビゲーションのようにナビゲーション ボタンのスタイルを変更するには、下のリンクが必要です。#footer の一番下に外部リンクがありますので、それも覚えておいてください。
ここにフィドルがあります
$(function(){
// This is for when vertical navigation on left side of #content is clicked
$('#sidemenu a').on('click', function(e){
e.preventDefault();
if($(this).hasClass('open')) {
// do nothing because the link is already open
} else {
var oldcontent = $('#sidemenu a.open').attr('href');
var newcontent = $(this).attr('href');
$(oldcontent).fadeOut('fast', function(){
$(newcontent).fadeIn('fast').removeClass('hidden');
$(oldcontent).addClass('hidden');
});
$('#sidemenu a').removeClass('open');
$(this).addClass('open');
}
});
// This is for when bottom links are clicked
$('#footer a').on('click', function(e){
e.preventDefault();
var oldcontent = $('#sidemenu a.open').attr('href');
var newcontent = $(this).attr('href');
// Check if $(this) element links to a tab content or external
if($(this).hasClass('open-tab')){
if (oldcontent == newcontent){
// If this tab is already open, do nothing to page
} else {
$('#content ' + String(oldcontent)).fadeOut('fast', function(){
$(newcontent).fadeIn('fast').removeClass('hidden');
$('#content ' + String(oldcontent)).addClass('hidden');
});
$('#sidemenu a').removeClass('open');
$('#sidemenu a ' + newcontent).addClass('open');
}
} else{
//just use href link to whatever the element's href attribute is
window.open($(this).attr('href'));
}
});
});