1

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


 });


 });
4

1 回答 1

0

您的#footer链接无法正常工作的原因是您的和点击功能#sidebar中的这一行：#footer#sidebar

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

它试图通过检查#sidebar.

如果您从底部单击一个链接，您单击的下一个链接（在#sidebarOR 上#footer）将无法找到当前内容 - 因为它不在 中#sidebar，它在#footer. 您需要一种var oldcontent基于您#sidebar 和您的#footer元素进行分配的方法。

于 2013-10-20T03:11:15.207 回答