单击选项卡，选项卡将消失

Question

在jQuery中创建选项卡。单击其他选项卡时，所有选项卡都将消失。我想不出解决办法

以下是无法正常工作的页面：http://www.sleepfullnights.com/products/sfn-537

这是另一个用它工作的人的JSFIDLE：http://jsfiddle.net/gravitybox/7pHg4/我已经复制并粘贴了其中的每个元素到页面中，问题仍然存在。

一个人指出，当点击标签时，有些东西给了标签css“display:none”，我找不到哪里可以修复它。

另外，有人还观察到，“在Chrome开发工具中，如果右键单击“元素”选项卡中的ul.tabs并选择“断开”

以下是我的jQuery代码：

     $(document).ready(function() {
    $('ul.tabs').each(function(){
      var active, content, links = $(this).find('a');
      active = links.first().addClass('active');
      content = $(active.attr('href'));
      links.not(':first').each(function () {
        $($(this).attr('href')).hide();
      });
      $(this).find('a').click(function(e){
        active.removeClass('active');
        content.hide();
        active = $(this);
        content = $($(this).attr('href'));
        active.addClass('active');
        content.show();
        return false;
      });
    });
  });

以及工作JSFIDLE中的代码：

    $(document).ready(function() {

$('ul.tabs').each(function(){
  var active, content, links = $(this).find('a');
  active = links.first().addClass('active');
  content = $(active.attr('href'));
  links.not(':first').each(function () {
    $($(this).attr('href')).hide();

  });
  $(this).find('a').click(function(e){
    active.removeClass('active');
    content.hide();
    active = $(this);
    content = $($(this).attr('href'));
    active.addClass('active');
    content.show();
    return false;
      alert('yep');
  });
});
});

任何帮助/指导都非常感谢。

Answer 1

这肯定是ul获取display:none的问题。您可以尝试在单击处理程序中使用$（'ul.tabs'）覆盖它。css（“显示”、“块”）。由于页面上的脚本太多，很难判断问题来自何处。

Answer 2

用于这些选项卡的代码比您需要的要复杂得多，我不确定是什么坏了。与其试图修复它，不如重新开始。这就是你想要的：

每次用户单击选项卡时，所有选项卡都会删除活动类，并且所有内容都会隐藏。然后，活动的单击选项卡被赋予active类，并显示其内容。这对用户来说应该是即时的。您需要在内容divs中添加一个类才能轻松完成此任务。我要添加选项卡内容。

工作小提琴

<div class="tab-content" id="tab-1">
    ...Content...
</div>

<div class="tab-content" id="tab-2">
    ...Content...
</div>

<div class="tab-content" id="tab-3">
    ...Content...
</div>

$(document).ready(function() {

    $('.tabs li a').click(function(event){
        event.preventDefault();
        $('.tabs li a').removeClass('active');
        $(this).addClass('active');
        $('.tab-content').hide();
        $($(this).attr('href')).show();
    });

});

Answer 3

我就是那个在Chrome开发工具中指出“如果你右键点击“元素”选项卡中的ul.tabs并选择“打开”的人

它在那里中断，因为该行隐藏了包含选项卡的ul。

查看您网站的代码，您需要在第39行的app.js中更改以下内容。

$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');

为此：

$(contentLocation).show().addClass('active').siblings('div').hide().removeClass('active');

您只想针对选定选项卡内容的div兄弟姐妹。现在，ul也是所选div的兄弟姐妹。如果没有'div'，siblings（）将选择它的所有兄弟并隐藏（）它们（因此也隐藏了选项卡）。

优选地，我将向选项卡内容添加一个选项卡内容类，并使用兄弟姐妹（'. tab内容'）而不是兄弟姐妹（'div'）来更加具体。这样，如果您添加另一个恰好是兄弟姐妹的div，它就不会隐藏它。