0

我正在学习 javascript，我正在尝试将一个简单的隐藏和显示效果切换为不走运。目前，只有通过单击具有相同引用的另一个 div 才能取消效果。

这是我的javascript：

var $ = jQuery;

$(document).ready(function(){
    $('.section').hide(); 
});

function showMe(num){
    $('.section').hide(0);   
    $('#div_one'+num).fadeIn(1000); 

}

这是我的CSS：

.height-auto

{
    height:auto;
}
.section

{
    width:552px;
    min-height:300px;

}

这是我的 HTML： 

    <div class="section home-things visible" id="div_one1">

        <div class="section-contents"></div>
    </div>
</div>

理想情况下，我希望“javascript:showMe(1)”切换“div_one1”等等。

请帮忙

4

2 回答 2

0

我迟到了，但为你构建了它，所以只是作为答案发布

$(document).ready(function(){
    $('.section').hide(); 
    $('#div_one1').show();
});

function showMe(num){
    $('.section').hide();
    $('#div_one'+num).fadeIn(300); 
}

演示。

于 2013-09-26T00:22:03.043 回答
0

您编写的代码纯粹是一个显示功能。每次调用都隐藏它showMe，然后再显示它。

像下面这样的东西可以使它成为一个实际的切换：

function showMe(num)
{
    if ($('#div_one'+num).is(":visible"))
    { // the div is visible, so we just want to hide it
        $('#div_one'+num).hide();
    }
    else
    { // the div is not visible, so hide the rest and show it
        $('.section').hide(0);
        $('#div_one'+num).fadeIn(1000);
    }

    // I don't know what these next two lines are for,
    // as your code sample doesn't include them, so leaving as-is :)
    $('.height-auto').removeClass('height-auto');
    $('#strict').addClass('height-auto');
}

然而，jQuery 有一些方便的内置函数可以使它更短一些：

function showMe(num)
{
    $('#div_one'+num).siblings('.section').hide();
    $('#div_one'+num).fadeToggle();

    // I don't know what these next two lines are for,
    // as your code sample doesn't include them, so leaving as-is :)
    $('.height-auto').removeClass('height-auto');
    $('#strict').addClass('height-auto');
}

jsFiddle

于 2013-09-26T00:11:40.017 回答