Question

我遇到了这个问题：

我有6个“外部”div，每个div都有一个img标签。
每6个div之后是另一个div，每个div有一个内容

我希望当我点击一个“外部”div时隐藏所有外部div并显示下一个div内容。

这是功能。它在那里工作http://jsfiddle.net/Weinz/jdFRw/4/

但是在测试网站上只隐藏.outerDiv没有显示下一个.innerDiv

$(function() {
    $(".outerDiv").click(function() {
        $(".outerDiv").hide();
        $(".innerDiv").hide();
        $(this).next("div").show();
    });
    $(".innerDiv").click(function() {
        $(".outerDiv").show();
        $(".innerDiv").hide();
    });
});

真正的HTML代码就是这个

<div class="block outerDiv"><a href="#"><img src="images/placeholder.jpg" width="165" height="74" alt="Temp" /></a></div>
     <div class="container innerDiv" style="display:none;">

我认为问题出现在.next上，但我尝试了不同的选项，没有任何效果。

如果我没有在innerDiv中设置显示它可以工作......

Answer 1

试试这个

$(function() {
$(".outerDiv").click(function() {
    $(".outerDiv").hide();
    $(".innerDiv").hide();
    $(this).next("div").show().css('display', 'block');
});
$(".innerDiv").click(function() {
    $(".outerDiv").show();
    $(".innerDiv").hide();
});

}）;

.show元素和.hide元素

1 个答案: