我试图在我发现的 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'));
}
});
});