JQuery选项卡，将我的div放入显示:无
JQuery选项卡，将我的div放入显示:无
提问于 2013-04-05 09:58:22
我已经在我的网站上实现了一些用于产品描述的标签。
它可以工作，但每个选项卡上的文本在2秒后消失，计数后的内容是将display:none样式添加到div。
它从Shopify的一个来源获取前5个div的信息，然后从另一个地方获取最后一个div。
同样，第一个div会填充来自每个div的所有信息，直到您单击顶部的选项卡，它才会显示相应的信息。
代码如下：
<script>
$(function() { // <== shorter form of doc ready
$('#tabs > div').hide();
$('#tabs div:first').fadeIn('slow');
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li.active').removeClass('active'); // <== Only what you need
$(this).parent().addClass('active');
var selectedTab=$(this).attr('href');
$('#tabs > div').fadeOut('slow', function() { // <== Use a callback
$(selectedTab).delay(500).fadeIn('slow'); // <== add a delay
});
return false;
});
});
</script>
<div id="tabs">
<ul class="tabs">
<li><a class="active" href="#tab-1">Why we love it</a></li>
<li><a href="#tab-2">Made With</a></li>
<li><a href="#tab-3">How to use</a></li>
<li><a href="#tab-4">Characteristics</a></li>
<li><a href="#tab-5">Meet the brand</a></li>
<li><a href="#tab-6">Recipes</a></li>
</ul>
<div class="tabcontainer">
<div class="description" itemprop="description">
{{ product.description }}
<div id="tab-5">
{% if product.vendor == 'Loving Earth' %}
{% include 'lovingearth' %}
{% endif %}
</div>
</div>
</div>
</div>在此之前，非常感谢您。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-05 11:04:18
更改此设置：
$('#tabs > div').fadeOut('slow', function() { // <== Use a callback
$(selectedTab).delay(500).fadeIn('slow'); // <== add a delay
});
return false;要这样做：
$('.tabcontainer div').fadeOut('slow', function() { // <== Use a callback
$(selectedTab).delay(500).fadeIn('slow'); // <== add a delay
});
return false;因为$('#tabs > div')选择了<div id="tabs">中的每个元素，所以所有的元素都被隐藏了--包括tabcontainer。由于tabcontainer是您正在尝试的divs的父级，然后是fadeIn()：$(selectedTab).delay(500).fadeIn('slow')，因此没有结果，因为它仍然位于其隐藏的父级中。
此外，您的<li><a class="selected">...是用<a>上的类在标记中设置的，但是在脚本中，您要将该类添加到<li>：$('#tabs ul li:first').addClass('active')中。这是无关的，但worthing指出。
带有上面概述的更改的示例 。
Stack Overflow用户
发布于 2013-04-05 10:19:34
问题是由这一行引起的
$('#tabs > div').fadeOut('slow', function() { // this line
$(selectedTab).delay(500).fadeIn('slow');
});您导致#tabs中的所有div都变成了fadeOut。我假设您希望在单击其他链接时隐藏#tab-5。您可能想要这样做。
$('#tab-5').fadeOut('slow', function() { // this line
$(selectedTab).delay(500).fadeIn('slow');
});对于您的情况，更合适的解决方案是
$('div[id^=tabs]').fadeOut('slow', function() { // this line
$(selectedTab).delay(500).fadeIn('slow');
});这将隐藏id以tabs开头的所有div
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15824704
复制相关文章
相似问题
腾讯云开发者
