我制作了自己的jquery选项卡版本，但我需要外部链接来显示选项卡内容和样式原始导航

Question

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

 });

 });

Answer 1

您的#footer链接不如#sidebar链接正常工作的原因是您的#footer和#sidebar单击功能中的以下行：

var oldcontent = $('#sidemenu a.open').attr('href');

它试图通过检查#sidebar子元素的类来查找当前内容。

如果您单击底部的链接，则单击的下一个链接（在#sidebar或#footer上）将无法找到当前内容 - 因为它不在#sidebar中，而是在#footer中。您需要一种方法来根据#sidebar和#footer元素分配var oldcontent。