Javascript切换隐藏

我正在学习javascript，我正在尝试将一个简单的隐藏和显示效果切换为无运气。当前，仅通过单击具有相同引用的另一个div来取消该效果

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

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

以下是我的javascript：

var $ = jQuery;

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

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

}

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

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

以下是我的CSS：

.height-auto

{
    height:auto;
}
.section

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

}

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

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

这是我的HTML：

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

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

理想情况下，我希望“javascript:showMe（1）”切换“div_one1”等等

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

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

---

请帮助

您编写的代码纯粹是一个显示功能。每次调用

showMe

都将其隐藏，然后再显示

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

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

类似于以下内容的内容可能会使其成为实际的切换：

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

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

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有一些方便的内置函数，可以使它稍微短一些：

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

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

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');
}

---

我来晚了，但我已经为你准备好了，所以只需发布作为答案

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

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

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

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

---

首先，请注意：在

a

中放置

div

是无效的HTML，在某些浏览器中可能会导致问题；使用

span

-您仍然可以设置其样式

显示：块

如果需要，但它不会再引起问题（或者只是将

标记设置为这样的样式，并完全删除内部元素）@CollinGrady仅供参考，从html5开始，您可以在锚定标记中包含块元素。它仍然是一个有效的html；有效的HTML5，但无效的一切，所以这取决于他使用：）轰！非常简明扼要。非常感谢。我会把它记在我的笔记里。真的很感激，谢谢：-）这不会改变事情；它仍然只显示部分，而不是再次隐藏：）这正是
OP
想要的，
IMO
并且它正在切换div（一个隐藏，另一个显示）。@CollinGrady，顺便说一句，你检查过演示了吗？另外，逻辑上一个
div
应该总是可见的。
    <div class="section home-things visible" id="div_one1">

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