正在进行什么

Question

在jQuery中创建标签。单击另一个选项卡时，所有选项卡都会消失。无法弄清楚修复

以下页面无效：http://www.sleepfullnights.com/products/sfn-537

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

有人指出，当点击时，某些内容正在显示css“display：none”，我无法找到修复位置。

另外，有人提出的另一个观察是“在Chrome开发工具中，如果右键单击”元素“标签中的ul.tabs并选择”Break On＆gt;属性修改“，它打破了”$（contentLocation）.show（）。addClass（'active'）。siblings（）。hide（）。removeClass（'act ive'）;“当你点击一个标签时”。< / p>

这是我的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;
      });
    });
  });

来自工作JSFiddle的代码：

    $(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

我是那个注意到“在Chrome开发工具中，如果你右键点击”元素“标签中的ul.tabs并选择”Break On＆gt;属性修改“，它打破了”$（contentLocation）.show（）。addClass（'active'）。siblings（）。hide（）。removeClass（'act ive'）;“

它会中断，因为该行隐藏了包含标签的ul。

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

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

到此：

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

您只想定位所选标签内容div的{{1}}兄弟。现在，div也是所选ul的兄弟姐妹。如果没有div，'div'会选择所有兄弟姐妹和siblings()他们（因此也会隐藏标签）。

最好是，我会在标签内容hide()元素中添加tab-content类，并使用div代替siblings('.tab-content')更具体。这样，如果您添加另一个恰好是兄弟姐妹的siblings('div')，它就不会隐藏它。

Answer 2

正在进行什么

用于这些标签的代码比你需要的复杂得多，而且我不确定是什么打破了。而不是尝试修复它，重新开始会更容易。这就是你想要的：

每次用户点击标签页时，所有标签页都会移除active类，并隐藏所有内容。然后，活动的单击选项卡将被赋予active类，并显示其内容。这对用户来说应该是即时的。您需要在内容div中添加一个类才能轻松完成此操作。我要添加tab-content。

代码

Working Fiddle

HTML（仅更改添加类）

<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>

使用Javascript：

$(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

ul获得display: none肯定是个问题。您可以尝试使用$('ul.tabs').css('display','block')在点击处理程序中覆盖它。由于页面上的脚本数量很多，很难说出问题的来源。

单击选项卡，选项卡消失

3 个答案:

正在进行什么

代码

HTML（仅更改添加类）

使用Javascript：