Question

我的问题是第一个tab_content在加载时显示。我的jquery：

$(document).ready(function() {

$(".tab_content").hide();
$("ul.tabs").each(function() {
    $(this).find('li:first').addClass("active");
    $(this).next('.tab_container').find('.tab_content:first').show();
});

我的HTML：

<ul class="tabs">
    <li><a href="#tab1">web</a></li>
    <li><a href="#tab2">graphics/print</a></li>
    <li><a href="#tab4">img</a></li>
</ul>
<div class="gwrapper">
    <div id="gallery">
        <div id="image"></div>
        <div id="description">Welcome to my portfolio. Click any link below.</div>
    </div>
</div>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        content
    </div>

当我在gwrapper上方移动ul class =“tabs”时，问题就开始了（用于在tab_container之上）。我知道问题是这一行中的选择器：

$(this).next('.tab_container').find('.tab_content:first').show();

我不知道如何跳转div并选择。我查了一下，但我不能把它拼凑起来。我不知道是否（或如何）在这里使用eq（）。

示例可以在jpatrolla.com上找到（然后点击投资组合）

Answer 1

也许：

$(this).siblings('.tab_container').find('.tab_content:first').show();

或

$(this).nextAll('.tab_container').first().find('.tab_content:first').show();

Answer 2

$(function() {
    $(".tab_content").hide();
    $(".tabs").each(function() {
        $(this).find('li').eq(0).addClass("active");
        $(this).nextAll('.tab_container').children('.tab_content').eq(0).show();
    });
});

示例HTML中的.tabs元素和.tab_container元素是兄弟姐妹，因此您可以使用.siblings()或.nextAll()从.tabs中选择它们元素。 .siblings()和.nextAll()之间的区别在于后者只查找当前选择之后的元素，前者查看所有兄弟元素。

请注意.eq(0)代替:first的使用，他们做同样的事情，只选择集合中的第一个元素，但使用.eq()更快，因为它没有＆＃39}。用绳子敲打。

以下是演示：http://jsfiddle.net/YbNJ2/

.nextAll()的文档：http://api.jquery.com/nextall

<强>更新

我通常希望尽可能帮助人们优化代码，您可以使用$.each()代替$().each()来提高循环的效果，甚至可以使用格式良好的{{1循环：

for

Answer 3

当你只想影响一件事时，你什么时候使用.each（）？

$(document).ready(function() {
    $(".tab_content").hide();
    $('.tabs').find('li:first').addClass("active");
    $('.tab_container').find('.tab_content:first').show();
});

Answer 4

.next（）匹配紧随其后的兄弟节点，在gwrapper上面移动ul class =“tabs”之后，现在不是这种情况。

如果你想使用next，这应该可行，

$(this).next().next('.tab_container').find('.tab_content:first').show();

jquery选择器没有加载

4 个答案: